@flozy/editor 5.8.8 → 5.8.9

package/dist/Editor/CommonEditor.js

@@ -54,13 +54,14 @@ const Item = /*#__PURE__*/forwardRef(({
   });
 });
 Item.displayName = "Item";
-const Element = props => {
+const Element = /*#__PURE__*/React.memo(props => {
   return /*#__PURE__*/_jsx(Section, {
     ...props,
     children: getBlock(props)
   });
-};
-const Leaf = ({
+});
+Element.displayName = "Element";
+const Leaf = /*#__PURE__*/React.memo(({
   attributes,
   children,
   leaf
@@ -71,12 +72,13 @@ const Leaf = ({
     ...attributes,
     children: children
   });
-};
+});
+Leaf.displayName = "Leaf";
 const updateTopBanner = (content = [], setTopBanner) => {
-  setTopBanner(() => {
-    const firstNode = content ? content[0] : {};
-    return firstNode?.type === "topbanner" ? firstNode : null;
-  });
+  // setTopBanner(() => {
+  //   const firstNode = content ? content[0] : {};
+  //   return firstNode?.type === "topbanner" ? firstNode : null;
+  // });
 };
 const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
   const {
@@ -96,7 +98,8 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
   const editorWrapper = useRef();
   const mentionsRef = useRef();
   const convertedContent = draftToSlate({
-    data: content
+    data: content,
+    needLayout: otherProps?.needLayout
   });
   const [value, setValue] = useState(convertedContent);
   const [isInteracted, setIsInteracted] = useState(false);
@@ -167,11 +170,11 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
   const debounced = useDebouncedCallback(
   // function
   value => {
+    debouncedValue.current = value;
     const {
       value: strVal,
       ...restVal
     } = getOnSaveData(value);
-    debouncedValue.current = value;
     onSave(strVal, restVal);
   },
   // delay in ms
@@ -182,7 +185,7 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
     return {
       value: JSON.stringify(val),
       text: text,
-      title: serializeToText(title?.children) || "Untitled"
+      title: serializeToText(title?.children) || ""
     };
   };
   const getPreviewImage = async (needBackground = false, options = {}) => {
@@ -312,7 +315,7 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
       updateTopBanner(newValue, setTopBanner);
       debounced(newValue);
       if (!isInteracted) {
-        setIsInteracted(true);
+        // setIsInteracted(true);
       }
     }
   };
@@ -596,8 +599,9 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
                 setIsTextSelected: setIsTextSelected,
                 customProps: customProps,
                 editorWrapper: editorWrapper
-              }) : null, !readOnly && showViewport ? /*#__PURE__*/_jsx(SwitchViewport, {
+              }) : null, !readOnly ? /*#__PURE__*/_jsx(SwitchViewport, {
                 breakpoint: breakpoint,
+                show: showViewport,
                 onChange: b => onSwitchBreakpoint(b)
               }) : null]
             })

package/dist/Editor/Editor.css

@@ -1263,6 +1263,19 @@ blockquote {
   pointer-events: auto;
 }
 
+@media (max-width: 899px) {
+  .MuiPopover-root {
+    z-index: 1302 !important;
+  }
+  canvas {
+    max-width: 100% !important;
+  }
+}
+
+.settingsHeader {
+  font-size: 14px !important;
+  font-weight: 500 !important;
+}
 .hideScroll {
   overflow-anchor: none;
 }
@@ -1278,20 +1291,6 @@ blockquote {
 .hideScroll::-webkit-scrollbar-thumb:hover {
   background: none !important;
 }
-@media (max-width: 899px) {
-  .MuiPopover-root {
-    z-index: 1302 !important;
-  }
-
-  canvas {
-    max-width: 100% !important;
-  }
-}
-
-.settingsHeader {
-  font-size: 14px !important;
-  font-weight: 500 !important;
-}
 
 .custom-scroll::-webkit-scrollbar {
   height: .6rem; 
@@ -1330,3 +1329,19 @@ blockquote {
   background: linear-gradient(112.61deg, #2C63ED 19.3%, #8360FD 88.14%) !important;
   text-transform: math-auto !important;
 }
+
+code.markcode {
+  border-radius: 4px;
+  padding: 6px 8px;
+  margin: 8px 0px;
+  display: block;
+  background-color: #f3f3f3;
+  font-family: 'Source Code Pro' !important;
+}
+
+/* Hide the popper when the reference is hidden */
+.hide-popper-on-overlap[data-popper-escaped],
+.hide-popper-on-overlap[data-popper-reference-hidden] {
+  visibility: hidden;
+  pointer-events: none;
+}

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

@@ -162,6 +162,7 @@ const EditorButton = props => {
                 display: "inline-flex",
                 color: "rgba(0, 0, 0, 0.54)",
                 marginBottom: "0px !important",
+                ...classes.buttonMoreOption,
                 ...classes.buttonMoreOption3
               },
               ...btnProps,
@@ -264,7 +265,7 @@ const EditorButton = props => {
             ...btnSp,
             borderStyle: borderStyle || "solid",
             color: `${textColor || "#FFFFFF"}`,
-            fontSize: textSize || "inherit",
+            fontSize: textSize || "12px",
             fontFamily: fontFamily || "PoppinsRegular",
             display: "inline-flex",
             alignItems: "center",

package/dist/Editor/Elements/DataView/Layouts/DataTypes/Components/Select.js

@@ -104,9 +104,9 @@ export default function Select(props) {
       return /*#__PURE__*/_jsx(Box, {
         className: "tv-ms-tag-wrpr",
         sx: {
-          "& svg": {
-            marginRight: "5px",
-            "& path": {
+          '& svg': {
+            marginRight: '5px',
+            '& path': {
               stroke: "#000"
             }
           }
@@ -125,19 +125,15 @@ export default function Select(props) {
             sx: {
               background: option?.color || appTheme?.palette?.editor?.tv_border1,
               border: "none",
-              "& .MuiChip-label": {
-                paddingLeft: "12px !important"
+              '& .MuiChip-label': {
+                paddingLeft: '12px !important'
               }
             },
             avatar: /*#__PURE__*/_jsx(AvatarIcon, {
               option: option,
               avatar: optionAvatar
             }),
-            deleteIcon: /*#__PURE__*/_jsx(CloseIcon, {
-              style: {
-                cursor: "pointer"
-              }
-            })
+            deleteIcon: /*#__PURE__*/_jsx(CloseIcon, {})
           }, key) : null;
         })
       });
@@ -153,8 +149,8 @@ export default function Select(props) {
           label: option.label || option.value || "",
           sx: {
             background: option.color || appTheme?.palette?.editor?.tv_border1,
-            "& .MuiChip-label": {
-              paddingLeft: "12px !important"
+            '& .MuiChip-label': {
+              paddingLeft: '12px !important'
             }
           },
           avatar: /*#__PURE__*/_jsx(AvatarIcon, {

package/dist/Editor/Elements/Grid/GridItem.js

@@ -50,8 +50,7 @@ const GridItemToolbar = props => {
     open: true,
     placement: "top-end",
     sx: classes.popTools,
-    className: "gi-tool-pp",
-    disablePortal: true,
+    className: "gi-tool-pp hide-popper-on-overlap",
     contentEditable: false,
     children: /*#__PURE__*/_jsxs(Box, {
       className: "ico-grp-ss",

package/dist/Editor/Elements/Link/Link.js

@@ -1,7 +1,7 @@
-import React, { useState } from "react";
+import React, { useRef, useState } from "react";
 import { Node, Transforms } from "slate";
 import { ReactEditor, useFocused, useSelected, useSlateStatic } from "slate-react";
-import { Box, IconButton, Tooltip } from "@mui/material";
+import { Box, IconButton, Popper, Tooltip } from "@mui/material";
 import OpenInNewIcon from "@mui/icons-material/OpenInNew";
 import EditIcon from "@mui/icons-material/Edit";
 import LinkOffIcon from "@mui/icons-material/LinkOff";
@@ -53,6 +53,7 @@ const Link = props => {
   const showInNewTab = element?.showInNewTab || element?.target;
   const linkType = element?.linkType;
   const classes = linkStyles();
+  const linkRef = useRef(null);
   const updateLink = data => {
     Transforms.setNodes(editor, data, {
       at: path
@@ -81,43 +82,53 @@ const Link = props => {
     const btnProps = handleLinkType(urlPath, linkType, true, showInNewTab === "_blank");
     const navType = getLinkType(linkType, urlPath);
     const hideOpenLink = navType === "page" || !navType;
-    return selected && focused ? /*#__PURE__*/_jsxs("div", {
-      className: "element-toolbar hr",
+    return selected && focused ? /*#__PURE__*/_jsx(Popper, {
+      anchorEl: linkRef?.current,
+      open: true,
+      placement: "top-start",
+      className: "hide-popper-on-overlap",
       contentEditable: false,
       style: {
-        width: "150px",
-        top: "100%",
-        left: "0px",
-        display: "flex"
+        zIndex: 1
       },
-      children: [hideOpenLink ? null : /*#__PURE__*/_jsx(Tooltip, {
-        title: "Open",
-        children: /*#__PURE__*/_jsx(Box, {
-          sx: {
-            display: "inline-flex",
-            color: "rgba(0, 0, 0, 0.54)"
-          },
-          ...btnProps,
-          children: /*#__PURE__*/_jsx(OpenInNewIcon, {})
-        })
-      }), /*#__PURE__*/_jsx(Tooltip, {
-        title: "Edit",
-        children: /*#__PURE__*/_jsx(IconButton, {
-          onClick: onEditLink,
-          children: /*#__PURE__*/_jsx(EditIcon, {})
-        })
-      }), /*#__PURE__*/_jsx(Tooltip, {
-        title: "Remove",
-        children: /*#__PURE__*/_jsx(IconButton, {
-          onClick: () => removeLink(editor),
-          children: /*#__PURE__*/_jsx(LinkOffIcon, {})
-        })
-      })]
+      children: /*#__PURE__*/_jsxs(Box, {
+        className: "element-toolbar hr",
+        style: {
+          width: "150px",
+          display: "flex",
+          position: "unset"
+        },
+        component: "div",
+        children: [hideOpenLink ? null : /*#__PURE__*/_jsx(Tooltip, {
+          title: "Open",
+          children: /*#__PURE__*/_jsx(Box, {
+            sx: {
+              display: "inline-flex",
+              color: "rgba(0, 0, 0, 0.54)"
+            },
+            ...btnProps,
+            children: /*#__PURE__*/_jsx(OpenInNewIcon, {})
+          })
+        }), /*#__PURE__*/_jsx(Tooltip, {
+          title: "Edit",
+          children: /*#__PURE__*/_jsx(IconButton, {
+            onClick: onEditLink,
+            children: /*#__PURE__*/_jsx(EditIcon, {})
+          })
+        }), /*#__PURE__*/_jsx(Tooltip, {
+          title: "Remove",
+          children: /*#__PURE__*/_jsx(IconButton, {
+            onClick: () => removeLink(editor),
+            children: /*#__PURE__*/_jsx(LinkOffIcon, {})
+          })
+        })]
+      })
     }) : null;
   };
   const buttonProps = handleLinkType(urlPath, linkType, readOnly, showInNewTab === "_blank");
   return /*#__PURE__*/_jsxs("div", {
     className: "link",
+    ref: linkRef,
     children: [/*#__PURE__*/_jsx(Box, {
       ...attributes,
       ...element.attr,

package/dist/Editor/Elements/SimpleText/index.js

@@ -1,7 +1,7 @@
 import React from "react";
 import { useSlateStatic, useSelected, ReactEditor } from "slate-react";
 import { Box } from "@mui/material";
-import { getPageSettings } from "../../utils/pageSettings";
+// import { getPageSettings } from "../../utils/pageSettings";
 import { isTextSelected } from "../../utils/helper";
 import { useEditorContext } from "../../hooks/useMouseMove";
 import SimpleTextStyle from "./style";
@@ -12,7 +12,6 @@ import { jsxs as _jsxs } from "react/jsx-runtime";
 import { createElement as _createElement } from "react";
 const SimpleText = props => {
   const {
-    theme,
     openAI
   } = useEditorContext() || {};
   const editor = useSlateStatic();
@@ -28,19 +27,15 @@ const SimpleText = props => {
     readOnly,
     editorPlaceholder
   } = customProps;
-  const {
-    element: pageSt
-  } = getPageSettings(editor) || {};
-  const {
-    pageColor
-  } = pageSt?.pageProps || {};
+  // const { element: pageSt } = getPageSettings(editor) || {};
+  // const { pageColor } = pageSt?.pageProps || {};
   const {
     activeBreakPoint
   } = useEditorContext();
   const lineHeight = element?.children[0]?.lineHeight;
   const lineH = getBreakpointLineSpacing(lineHeight, activeBreakPoint);
   const classes = SimpleTextStyle({
-    pageColor: pageColor || theme?.palette?.editor?.background || "#FFFFFF",
+    pageColor: "#FFFFFF",
     lineHeight: lineH
   });
   const selected = useSelected();
@@ -59,14 +54,14 @@ const SimpleText = props => {
     contentEditable: false,
     className: "placeholder-simple-text",
     children: isEmptyEditor ? editorPlaceholder || "Write Something..." : showPlaceHolder ? opacity && selected ? /*#__PURE__*/_jsxs(_Fragment, {
-      children: ["Type ", /*#__PURE__*/_jsx("span", {
+      children: ["Type", " ", /*#__PURE__*/_jsx("span", {
         style: {
-          backgroundColor: '#F2F6FA',
+          backgroundColor: "#F2F6FA",
           padding: "0px 2px",
           borderRadius: "2px"
         },
         children: "/"
-      }), " to browse elements"]
+      }), " ", "to browse elements"]
     }) : "" : ""
   }));
 };

package/dist/Editor/Elements/SimpleText/style.js

@@ -35,8 +35,8 @@ const SimpleTextStyle = ({
       height: "24px",
       overflow: "hidden",
       fontSize: "14px",
-      display: 'inline-flex',
-      alignItems: 'center',
+      display: "inline-flex",
+      alignItems: "center",
       "& .bg-pad-sl": {
         padding: "2px 4px 2px 4px",
         background: "transparent",

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

@@ -1,12 +1,24 @@
 import React from "react";
+import { Text } from "slate";
 import { jsx as _jsx } from "react/jsx-runtime";
+const isEmptyTextNode = node => {
+  if (Text.isText(node)) {
+    return !node.text.trim();
+  }
+  return false;
+};
 const Title = props => {
   const {
+    element,
     attributes,
-    children
+    children,
+    customProps
   } = props;
+  const isEmpty = !customProps?.readOnly && isEmptyTextNode(element?.children[0]) ? "empty" : "";
   return /*#__PURE__*/_jsx("div", {
     ...attributes,
+    placeholder: "Title",
+    className: `content-editable ${isEmpty}`,
     style: {
       fontWeight: "bold",
       fontSize: "20px"

package/dist/Editor/Elements/Variables/Style.js

@@ -1,4 +1,4 @@
-const VariableStyles = () => ({
+const VariableStyles = theme => ({
   variablesItem: {
     color: "#2563EB",
     background: "#EEEEEE"
@@ -37,8 +37,34 @@ const VariableStyles = () => ({
     "& .MuiMenuItem-root": {
       color: "#64748B"
     },
+    "& .MuiPaper-root": {
+      borderRadius: '8px',
+      backgroundColor: `${theme?.palette?.editor?.miniToolBarBackground} !important`,
+      marginTop: '5px',
+      "@media only screen and (max-width: 599px)": {
+        padding: '10px 0px'
+      }
+    },
+    "& .MuiList-root": {
+      padding: '0px'
+    },
+    "& .MuiButtonBase-root": {
+      margin: '6px',
+      borderRadius: '8px',
+      padding: '6px 14px',
+      fontSize: '14px',
+      fontWeight: '400',
+      color: theme?.palette?.editor?.deletePopUpButtonTextColor,
+      "&:hover": {
+        background: `${theme?.palette?.editor?.menuOptionHoverBackground} !important`
+      },
+      "@media only screen and (max-width: 599px)": {
+        minHeight: '30px',
+        margin: '0px 6px'
+      }
+    },
     "& .Mui-selected": {
-      backgroundColor: "rgba(0, 0, 0, 0.04) !important"
+      backgroundColor: 'unset !important'
     }
   }
 });

package/dist/Editor/Elements/Variables/VariableButton.js

@@ -3,11 +3,15 @@ import { useSlateStatic } from "slate-react";
 import { MenuItem, Select } from "@mui/material";
 import { insertVariables } from "../../utils/variables";
 import VariableStyles from "./Style";
-import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown";
+import KeyboardArrowDownRoundedIcon from '@mui/icons-material/KeyboardArrowDownRounded';
+import { useEditorContext } from "../../hooks/useMouseMove";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const VariableButton = props => {
-  const classes = VariableStyles();
+  const {
+    theme
+  } = useEditorContext();
+  const classes = VariableStyles(theme);
   const editor = useSlateStatic();
   const {
     options
@@ -24,13 +28,14 @@ const VariableButton = props => {
     value: "",
     sx: classes.variableBtn,
     onChange: updateVariable,
-    IconComponent: () => /*#__PURE__*/_jsx(KeyboardArrowDownIcon, {}),
+    IconComponent: () => /*#__PURE__*/_jsx(KeyboardArrowDownRoundedIcon, {}),
     MenuProps: {
       sx: classes.variableMenuItem,
       PaperProps: {
         style: {
           maxHeight: 300,
-          overflowY: "auto"
+          overflowY: "auto",
+          transformOrigin: 'top left'
         },
         sx: {
           "&::-webkit-scrollbar-track": {
@@ -40,6 +45,14 @@ const VariableButton = props => {
             borderRadius: "16px"
           }
         }
+      },
+      anchorOrigin: {
+        vertical: 'bottom',
+        horizontal: 'right'
+      },
+      transformOrigin: {
+        vertical: 'top',
+        horizontal: 'right'
       }
     },
     children: [/*#__PURE__*/_jsx(MenuItem, {

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

@@ -1,5 +1,5 @@
-import React, { useCallback, useEffect, useState } from "react";
-import { Popper, Fade, Paper, ClickAwayListener } from "@mui/material";
+import React, { useEffect, useState } from "react";
+import { Popper, Paper, ClickAwayListener } from "@mui/material";
 import { Editor, Range, Transforms } from "slate";
 import { ReactEditor, useSlate } from "slate-react";
 import useDrag from "../../hooks/useDrag";
@@ -21,7 +21,8 @@ const PopupTool = props => {
   const classes = usePopupStyles(theme);
   const {
     setPopupType,
-    openAI
+    openAI,
+    selectedElement
   } = useEditorContext();
   const [anchorEl, setAnchorEl] = useState(null);
   const [open, setOpen] = useState(false);
@@ -32,13 +33,10 @@ const PopupTool = props => {
   const [event] = useDrag(anchorEl);
   const id = open ? "popup-edit-tool" : "";
   const [size] = useWindowResize();
-  const {
-    selectedElement
-  } = useEditorContext();
-  const updateAnchorEl = useCallback(() => {
+  const updateAnchorEl = isScroll => {
     try {
       const isHavingSelection = selection && !Range.isCollapsed(selection);
-      if (isHavingSelection) {
+      if (isHavingSelection && event === "end") {
         const domRange = ReactEditor.toDOMRange(editor, editor.selection);
         const editorContainer = document.querySelector("#slate-wrapper-scroll-container")?.getBoundingClientRect();
         const rect = domRange.getBoundingClientRect();
@@ -47,16 +45,21 @@ const PopupTool = props => {
           rect.y = -500; // hide the popper
         }
 
-        setAnchorEl({
-          clientWidth: rect.width,
-          clientHeight: rect.height,
-          getBoundingClientRect: () => rect
-        });
+        // Create a dummy anchor element to match Popper's requirements
+        const anchor = document.createElement("div");
+        anchor.style.position = "absolute";
+        anchor.style.top = `${rect.top + window.scrollY}px`;
+        anchor.style.left = `${rect.left + window.scrollX}px`;
+        document.body.appendChild(anchor);
+        if (!anchorEl || isScroll === "scroll") {
+          setAnchorEl(anchor);
+          setOpen(true);
+        }
       }
     } catch (err) {
       console.log(err);
     }
-  }, [selection]);
+  };
   useEditorScroll(editorWrapper, updateAnchorEl);
   useEffect(() => {
     const userStoppedSelection = size?.device === "xs" ? true : event === "end"; // for mobile, when user starts the selection, we are gonna show the popup tool
@@ -86,7 +89,7 @@ const PopupTool = props => {
       updateAnchorEl();
       hideSlateSelection(); // removes slate selection background, when there is no selection
     }
-  }, [selection]);
+  }, [selection, event]);
   useEffect(() => {
     if (selectedElement?.enable === 1) {
       setAnchorEl(null);
@@ -117,24 +120,18 @@ const PopupTool = props => {
       id: id,
       open: open,
       anchorEl: anchorEl,
-      transition: true,
       sx: classes.popupWrapper,
       placement: "top-start",
-      children: ({
-        TransitionProps
-      }) => /*#__PURE__*/_jsx(Fade, {
-        ...TransitionProps,
-        children: /*#__PURE__*/_jsx(Paper, {
-          style: {
-            borderRadius: "6px",
-            border: "1px solid #8360FD"
-          },
-          children: /*#__PURE__*/_jsx(MiniTextFormat, {
-            editor: editor,
-            classes: classes,
-            closeMainPopup: handleClose,
-            customProps: customProps
-          })
+      children: /*#__PURE__*/_jsx(Paper, {
+        style: {
+          borderRadius: "6px",
+          border: "1px solid #8360FD"
+        },
+        children: /*#__PURE__*/_jsx(MiniTextFormat, {
+          editor: editor,
+          classes: classes,
+          closeMainPopup: handleClose,
+          customProps: customProps
         })
       })
     })

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];