@flozy/editor 9.8.2 → 9.8.3

package/dist/Editor/ChatEditor.js

@@ -1,6 +1,6 @@
 import React, { useCallback, useMemo, useRef, useImperativeHandle, forwardRef, useState } from "react";
-import { Editable, Slate, ReactEditor } from "slate-react";
-import { createEditor, Transforms, Editor } from "slate";
+import { Editable, Slate, ReactEditor } from 'slate-react';
+import { createEditor, Transforms, Editor } from 'slate';
 import withCommon from "./hooks/withCommon";
 import { getBlock, getMarked, serializeMentions } from "./utils/chatEditor/SlateUtilityFunctions";
 import MiniTextFormat from "./Toolbar/PopupTool/MiniTextFormat";
@@ -32,16 +32,15 @@ const ChatEditor = /*#__PURE__*/forwardRef((props, ref) => {
     onBlur = () => {},
     isMobile = false,
     debounceTimeOut = 10,
-    translation,
     isMarkDown = false,
-    markDownContent = ""
+    markDownContent = ''
   } = props;
   const classes = usePopupStyle(theme);
   const convertedContent = draftToSlate({
     data: content && content?.length > 0 ? content : [{
-      type: "paragraph",
+      type: 'paragraph',
       children: [{
-        text: ""
+        text: ''
       }]
     }]
   });
@@ -148,11 +147,17 @@ const ChatEditor = /*#__PURE__*/forwardRef((props, ref) => {
   };
   const {
     CHARACTERS = [],
-    hideTools,
-    translationMock
+    hideTools
     // needLayout = true,
   } = otherProps || {};
   const mentionsRef = useRef();
+  const customProps = {
+    ...(otherProps || {}),
+    hideTools: ["settings", "add_column", "drag", "resize"],
+    readOnly: isReadOnly,
+    editorPlaceholder: "Write Something",
+    page_id: 1
+  };
   const [mentions, setMentions] = useMentions({
     editor,
     selection: editor?.selection
@@ -213,15 +218,6 @@ const ChatEditor = /*#__PURE__*/forwardRef((props, ref) => {
     debounced(newValue);
     debouncedValue.current = newValue;
   };
-  const dummyTranslation = () => {};
-  const customProps = {
-    ...(otherProps || {}),
-    hideTools: ["settings", "add_column", "drag", "resize"],
-    readOnly: isReadOnly,
-    editorPlaceholder: "Write Something",
-    page_id: 1,
-    translation: translation || translationMock || dummyTranslation
-  };
   const Element = props => {
     return getBlock(props);
   };
@@ -257,7 +253,7 @@ const ChatEditor = /*#__PURE__*/forwardRef((props, ref) => {
         editor
       });
     } else if (event.key === "Enter" && !isMobile) {
-      const isEmpty = debouncedValue?.current.length === 1 && debouncedValue?.current[0].type === "paragraph" && debouncedValue?.current[0].children.length === 1 && debouncedValue?.current[0].children[0].text === "";
+      const isEmpty = debouncedValue?.current.length === 1 && debouncedValue?.current[0].type === 'paragraph' && debouncedValue?.current[0].children.length === 1 && debouncedValue?.current[0].children[0].text === '';
       if (isEmpty) {
         event.preventDefault();
         return;
@@ -297,10 +293,10 @@ const ChatEditor = /*#__PURE__*/forwardRef((props, ref) => {
     }
   };
 
-  const html = isMarkDown ? convertMDToHTML(markDownContent) : null;
   const handleFocus = () => {
     setIsFocused(true);
   };
+  const html = isMarkDown ? convertMDToHTML(markDownContent) : null;
   return !isMarkDown ? /*#__PURE__*/_jsx(EditorProvider, {
     theme: theme,
     editor: editor,
@@ -311,20 +307,18 @@ const ChatEditor = /*#__PURE__*/forwardRef((props, ref) => {
       children: [toolBar && /*#__PURE__*/_jsx(MiniTextFormat, {
         classes: classes,
         editor: editor,
-        closeMainPopup: handleClose,
-        customProps: customProps
+        closeMainPopup: handleClose
       }), /*#__PURE__*/_jsx(Editable, {
+        onFocus: handleFocus,
         className: "chatEditorRoot",
         renderElement: renderElement,
         renderLeaf: renderLeaf,
         decorate: decorators,
         placeholder: "Start typing ...",
         spellCheck: true,
-        onFocus: handleFocus,
         onBlur: handleBlur,
         onKeyDown: onKeyDown,
-        onPaste: handlePaste,
-        customProps: customProps
+        onPaste: handlePaste
       }), !readOnly && isFocused ? /*#__PURE__*/_jsx(MentionsPopup, {
         ref: mentionsRef,
         mentions: mentions,
@@ -334,8 +328,7 @@ const ChatEditor = /*#__PURE__*/forwardRef((props, ref) => {
         index: index,
         chars: chars,
         type: type,
-        theme: theme,
-        customProps: customProps
+        theme: theme
       }) : null]
     }, id)
   }) : /*#__PURE__*/_jsx("div", {

package/dist/Editor/CommonEditor.js

@@ -1,7 +1,7 @@
 /* eslint-disable no-unused-vars */
-import React, { useRef, useCallback, useEffect, useMemo, useState, forwardRef, useImperativeHandle, createContext } from "react";
+import React, { useRef, useCallback, useEffect, useMemo, useState, forwardRef, useImperativeHandle } from "react";
 import PropTypes from "prop-types";
-import { createEditor, Editor, Range, Transforms } from "slate";
+import { createEditor, Range, Transforms } from "slate";
 import { Slate, Editable, ReactEditor } from "slate-react";
 import { useDebouncedCallback } from "use-debounce";
 import { getMarked, getBlock } from "./utils/SlateUtilityFunctions";
@@ -15,9 +15,9 @@ import withCommon from "./hooks/withCommon";
 import DialogWrapper from "./DialogWrapper";
 import { serializeToText } from "./utils/serializeToText";
 import { getPageSettings } from "./utils/pageSettings";
-import { getThumbnailImage, invertColor, pageTextStyle } from "./helper";
+import { getThumbnailImage, invertColor } from "./helper";
 import PopupTool from "./Toolbar/PopupTool";
-import { Box, Typography, useTheme, IconButton } from "@mui/material";
+import { Box, Typography, useTheme } from "@mui/material";
 import Shorthands from "./common/Shorthands";
 import MiniToolbar from "./Toolbar/Mini/MiniToolbar";
 import { EditorProvider } from "./hooks/useMouseMove";
@@ -26,12 +26,9 @@ import editorStyles from "./Styles/EditorStyles";
 import DragAndDrop from "./common/DnD";
 import Section from "./common/Section";
 import decorators from "./utils/Decorators";
-import { getTRBLBreakPoints, getVariableValue, getBreakpointLineSpacing } from "./helper/theme";
+import { getBreakpointLineSpacing, getTRBLBreakPoints } from "./helper/theme";
 import { getInitialValue, handleInsertLastElement, isEverythingSelected, isFreeGrid, isFreeGridFragment, isRestrictedNode, outsideEditorClickLabel } from "./utils/helper";
 import useWindowResize from "./hooks/useWindowResize";
-import { getTheme } from "./theme";
-import ThemeSettings from "./themeSettings";
-import ThemeSettingsAI from "./themeSettingsAI";
 import PopoverAIInput from "./Elements/AI/PopoverAIInput";
 import RnDCopy from "./common/RnD/RnDCopy";
 import SwitchViewport from "./common/RnD/SwitchViewport/SwitchViewport";
@@ -40,12 +37,9 @@ import "./font.css";
 import "./Editor.css";
 import "animate.css";
 import FontLoader from "./common/FontLoader/FontLoader";
-import { ThemeAIIcon, ThemePaintIcon } from "./assets/svg/ThemeIcons";
 import { CustomDialogComponent } from "./common/CustomDialog";
-import { extractTextWithPath, replaceTextPath } from "./helper/textIndeces.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-export const ThemeContext = /*#__PURE__*/createContext(null);
 const Item = /*#__PURE__*/forwardRef(({
   children,
   ...props
@@ -87,7 +81,6 @@ const updateTopBanner = (content = [], setTopBanner) => {
     return firstNode?.type === "topbanner" ? firstNode : null;
   });
 };
-const dummyTranslation = () => {};
 const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
   const {
     id,
@@ -101,16 +94,13 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
     otherProps,
     isIframe,
     theme,
-    showThemeButtons,
     showViewport = false,
-    overrideWrapperStyles = {},
-    translation
+    overrideWrapperStyles = {}
   } = props;
   const editorWrapper = useRef();
   const mentionsRef = useRef();
   const convertedContent = draftToSlate({
-    data: content,
-    needLayout: otherProps?.needLayout
+    data: content
   });
   const [value, setValue] = useState(convertedContent);
   const [isInteracted, setIsInteracted] = useState(false);
@@ -135,15 +125,12 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
     editorClass,
     fixedWidth = "60%",
     fullWidth = "80%",
-    hideTools = [],
-    translationMock
+    hideTools = []
   } = otherProps || {};
-  const translationFn = translation || translationMock || dummyTranslation;
   const editor = useMemo(() => {
     if (collaborativeEditor) return collaborativeEditor;
     const editor = createEditor();
     editor.needLayout = needLayout;
-    editor.translation = translationFn;
     return withCommon(editor, {
       needLayout
     });
@@ -154,11 +141,10 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
   const {
     bannerSpacing,
     pageBgImage,
-    pageColor = "",
+    pageColor,
     color: pageTextColor,
     pageWidth,
     maxWidth: pageMaxWidth,
-    theme: selectedTheme,
     lineHeight
   } = pageSt?.pageProps || {
     bannerSpacing: {
@@ -170,17 +156,10 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
   };
   const classes = editorStyles({
     padHeight: !fullScreen ? otherProps?.padHeight : 20,
-    placeHolderColor: invertColor(pageColor.startsWith("var") ? getVariableValue(pageColor) : pageColor || "#FFF"),
+    placeHolderColor: invertColor(pageColor || "#FFF"),
     theme,
     overrideWrapperStyles
   });
-  const [openTheme, setOpenTheme] = useState(false);
-  const [openAITheme, setOpenAITheme] = useState(false);
-  const [, setThemeUpdated] = useState(0);
-  const triggerRender = () => {
-    setThemeUpdated(prev => prev + 1); // Incrementing forces a re-render while updating theme
-  };
-
   const isMobile = window.matchMedia("(max-width: 899px)")?.matches || false;
   useEffect(() => {
     setValue(draftToSlate({
@@ -194,11 +173,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
@@ -209,7 +188,7 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
     return {
       value: JSON.stringify(val),
       text: text,
-      title: serializeToText(title?.children) || ""
+      title: serializeToText(title?.children) || "Untitled"
     };
   };
   const getTitleSaveData = title => {
@@ -241,9 +220,7 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
 
   const onSwitchBreakpoint = b => {
     setBreakpoint(b);
-    setTimeout(() => {
-      reRenderAllNodes();
-    }, 0);
+    reRenderAllNodes();
   };
   useImperativeHandle(ref, () => ({
     async getThumbnail(needBackground = false, options = {}) {
@@ -298,6 +275,7 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
     },
     toggleFullscreen() {
       setFullScreen(!fullScreen);
+      Transforms.deselect(editor);
     },
     toggleToolbarShow() {
       setToolbarShow(!toolbarShow);
@@ -321,12 +299,6 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
     redo() {
       editor?.redo();
     },
-    toggleTheme() {
-      setOpenTheme(!openTheme);
-    },
-    toggleAITheme() {
-      setOpenAITheme(!openAITheme);
-    },
     getPageSettings: {
       background: pageBgImage && pageBgImage !== "none" ? `url(${pageBgImage})` : pageColor || ""
     }
@@ -352,7 +324,6 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
     ...mentions,
     CHARACTERS,
     hideTools: updatedHideTools || [],
-    translation: translation || translationFn,
     editor
   }) : [];
   const handleEditorChange = newValue => {
@@ -380,10 +351,9 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
     isIframe: isIframe,
     onDrawerOpen: onDrawerOpen,
     ICON_API: "https://assets.agenciflow.com",
-    translation: translationFn,
     getTitleSaveData
   };
-  const lineH = getBreakpointLineSpacing(lineHeight, breakpoint || (isMobile ? "xs" : ""));
+  const lineH = getBreakpointLineSpacing(lineHeight, breakpoint);
   const renderElement = useCallback(props => {
     return /*#__PURE__*/_jsx(Element, {
       ...props,
@@ -516,7 +486,9 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
     window.open("https://www.flozy.com", "_blank");
   };
   const editorWrapperStyle = useMemo(() => {
-    const style = {};
+    const style = {
+      color: pageTextColor || ""
+    };
     if (pageBgImage && pageBgImage !== "none") {
       style.backgroundImage = `url(${pageBgImage})`;
       style.backgroundSize = `cover`;
@@ -526,7 +498,6 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
     }
     return style;
   }, [pageBgImage, pageColor, pageTextColor]);
-  const themeProps = getTheme(selectedTheme);
 
   // const handleContextMenu = (e) => {
   //   if (!readOnly) {
@@ -535,7 +506,6 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
   //   }
   // };
 
-  const gradientColor = pageTextStyle(pageTextColor);
   const handleCursorScroll = container => {
     try {
       if (!customProps?.isMobile) {
@@ -557,74 +527,14 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
       console.log("handleCursorScroll", err);
     }
   };
-  window.getTextIndeces = () => {
-    try {
-      const textWithPaths = extractTextWithPath(editor.children, []);
-      return textWithPaths;
-    } catch (err) {
-      console.log(err);
-    }
-  };
-  window.replaceTextIndeces = (path_data = []) => {
-    try {
-      const replacedJson = replaceTextPath(JSON.parse(JSON.stringify(editor.children)), path_data);
-
-      // loop delete all
-      editor.children.forEach(() => {
-        Transforms.delete(editor, {
-          at: [0]
-        });
-      });
-
-      // Insert new nodes
-      Transforms.insertNodes(editor, replacedJson, {
-        at: [0]
-      });
-    } catch (err) {
-      console.log(err);
-    }
-  };
-  window.replaceEditorContent = (fragments = []) => {
-    try {
-      // loop delete all
-      editor.children.forEach(() => {
-        Transforms.delete(editor, {
-          at: [0]
-        });
-      });
-
-      // Insert new nodes
-      Transforms.insertNodes(editor, fragments, {
-        at: [0]
-      });
-    } catch (err) {
-      console.log(err);
-    }
-  };
   return /*#__PURE__*/_jsxs(EditorProvider, {
     theme: theme,
     editor: editor,
-    openTheme: openTheme,
-    setOpenTheme: setOpenTheme,
-    triggerRender: triggerRender,
-    children: [showThemeButtons ? /*#__PURE__*/_jsxs("div", {
-      className: "theme-buttons",
-      children: [/*#__PURE__*/_jsx(IconButton, {
-        onClick: () => setOpenTheme(true),
-        children: /*#__PURE__*/_jsx(ThemePaintIcon, {})
-      }), /*#__PURE__*/_jsx(IconButton, {
-        onClick: () => setOpenAITheme(true),
-        style: {
-          marginTop: "4px"
-        },
-        children: /*#__PURE__*/_jsx(ThemeAIIcon, {})
-      })]
-    }) : null, /*#__PURE__*/_jsx(DialogWrapper, {
+    children: [/*#__PURE__*/_jsx(DialogWrapper, {
       classes: classes,
       ...props,
       fullScreen: fullScreen,
       footer: footer || "",
-      selectedTheme: selectedTheme,
       children: /*#__PURE__*/_jsxs(Box, {
         component: "div",
         className: `et-wrpr stimulate-${breakpoint} ${editorClass || ""} ${isIframe ? "iframe-editor" : ""}`,
@@ -643,12 +553,7 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
             children: /*#__PURE__*/_jsxs(Overlay, {
               children: [/*#__PURE__*/_jsx(Box, {
                 className: `pc-${editorClass || ""} ${hasTopBanner() ? "has-topbanner" : ""} ${!pageColor ? "no-color" : ""} scrollable-content scrollSmooth ${readOnly ? "readOnlyContainer" : ""}`,
-                sx: {
-                  ...classes.slateWrapper,
-                  '& span[data-slate-string="true"]': {
-                    ...gradientColor
-                  }
-                },
+                sx: classes.slateWrapper,
                 id: "slate-wrapper-scroll-container",
                 ref: editorWrapper,
                 onClick: e => {
@@ -659,7 +564,6 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
                 children: /*#__PURE__*/_jsxs(Box, {
                   component: "div",
                   className: "max-content",
-                  sx: themeProps?.sxProps || {},
                   "data-info": outsideEditorClickLabel,
                   children: [renderTopBanner(), /*#__PURE__*/_jsx("div", {
                     className: "scroll-area",
@@ -704,7 +608,6 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
                         chars: chars,
                         type: type,
                         theme: theme,
-                        customProps: customProps,
                         otherProps: customProps
                       }) : null, /*#__PURE__*/_jsx(RnDCopy, {
                         readOnly: readOnly
@@ -715,8 +618,7 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
                     theme: theme
                   }) : null, /*#__PURE__*/_jsx(PopoverAIInput, {
                     otherProps: otherProps || {},
-                    editorWrapper: editorWrapper,
-                    translation: translation || translationMock
+                    editorWrapper: editorWrapper
                   }), footer && (fullScreen || readOnly) && /*#__PURE__*/_jsx(Typography, {
                     sx: {
                       color: "rgb(100, 116, 139)",
@@ -728,18 +630,6 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
                     "data-info": outsideEditorClickLabel,
                     onClick: handleFooterClick,
                     children: footer
-                  }), openTheme ? /*#__PURE__*/_jsx(ThemeSettings, {
-                    open: openTheme,
-                    setOpen: setOpenTheme,
-                    editor: editor,
-                    services: otherProps?.services,
-                    appTheme: theme,
-                    customProps: customProps
-                  }) : null, /*#__PURE__*/_jsx(ThemeSettingsAI, {
-                    openAITheme: openAITheme,
-                    setOpenAITheme: setOpenAITheme,
-                    onSaveTheme: otherProps?.onSaveTheme,
-                    theme: theme
                   })]
                 })
               }), !readOnly ? /*#__PURE__*/_jsx(PopupTool, {
@@ -748,17 +638,14 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
                 setIsTextSelected: setIsTextSelected,
                 customProps: customProps,
                 editorWrapper: editorWrapper
-              }) : null, !readOnly ? /*#__PURE__*/_jsx(SwitchViewport, {
+              }) : null, !readOnly && showViewport ? /*#__PURE__*/_jsx(SwitchViewport, {
                 breakpoint: breakpoint,
-                show: showViewport,
-                onChange: b => onSwitchBreakpoint(b),
-                translation: translation || translationMock
+                onChange: b => onSwitchBreakpoint(b)
               }) : null]
             })
           }), htmlAction.showInput && /*#__PURE__*/_jsx(CodeToText, {
             ...htmlAction,
-            handleCodeToText: handleCodeToText,
-            translation: translation || translationMock
+            handleCodeToText: handleCodeToText
           })]
         }, id), /*#__PURE__*/_jsx(FontLoader, {
           otherProps: {
@@ -774,8 +661,7 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
       cancelText: "Cancel",
       onConfirm: () => {
         handleDeleteAll();
-      },
-      translation: translation || translationMock
+      }
     })]
   });
 });

package/dist/Editor/DialogWrapper.js

@@ -2,7 +2,6 @@ import React from "react";
 import { Dialog, DialogTitle, DialogContent, IconButton, Grid } from "@mui/material";
 import CloseIcon from "@mui/icons-material/Close";
 import ViewportStimulator from "./common/RnD/Theme/ViewportStimulator";
-import MainThemeProvider from "./common/RnD/Theme/MainThemeProvider";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const DialogWrapper = props => {
@@ -10,45 +9,40 @@ const DialogWrapper = props => {
     fullScreen,
     onClose,
     children,
-    classes,
-    selectedTheme
+    classes
   } = props;
-  return fullScreen ? /*#__PURE__*/_jsx(MainThemeProvider, {
-    userSelectedTheme: selectedTheme,
-    children: /*#__PURE__*/_jsxs(Dialog, {
-      className: `dialogComp`,
-      open: fullScreen,
-      fullScreen: fullScreen,
-      onClose: onClose,
+  return fullScreen ? /*#__PURE__*/_jsxs(Dialog, {
+    className: `dialogComp`,
+    open: fullScreen,
+    fullScreen: fullScreen,
+    onClose: onClose,
+    style: {
+      zIndex: 1000
+    },
+    sx: classes.fullScreenWrapper,
+    children: [/*#__PURE__*/_jsx(DialogTitle, {
       style: {
-        zIndex: 1000
+        padding: "6px 8px"
       },
-      sx: classes.fullScreenWrapper,
-      children: [/*#__PURE__*/_jsx(DialogTitle, {
-        style: {
-          padding: "6px 8px"
-        },
+      children: /*#__PURE__*/_jsx(Grid, {
         children: /*#__PURE__*/_jsx(Grid, {
-          children: /*#__PURE__*/_jsx(Grid, {
+          style: {
+            display: "flex",
+            justifyContent: "end"
+          },
+          children: /*#__PURE__*/_jsx(IconButton, {
+            onClick: onClose,
             style: {
-              display: "flex",
-              justifyContent: "end"
+              background: "rgba(255,255,255,0.5)"
             },
-            children: /*#__PURE__*/_jsx(IconButton, {
-              onClick: onClose,
-              style: {
-                background: "rgba(255,255,255,0.5)"
-              },
-              children: /*#__PURE__*/_jsx(CloseIcon, {})
-            })
+            children: /*#__PURE__*/_jsx(CloseIcon, {})
           })
         })
-      }), /*#__PURE__*/_jsx(DialogContent, {
-        children: children
-      })]
-    })
+      })
+    }), /*#__PURE__*/_jsx(DialogContent, {
+      children: children
+    })]
   }) : /*#__PURE__*/_jsx(ViewportStimulator, {
-    selectedTheme: selectedTheme,
     children: children
   });
 };

package/dist/Editor/Editor.css

@@ -1342,23 +1342,19 @@ code.markcode {
   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;
 }
-
-.theme-buttons {
-  display: flex;
-  justify-content: end;
-  align-items: center;
-  margin: auto;
-  position: absolute;
-  top: 60px;
-  right: 20px;
-  z-index: 1000;
+code.markcode {
+  border-radius: 4px;
+  padding: 6px 8px;
+  margin: 8px 0px;
+  display: block;
+  background-color: #f3f3f3;
+  font-family: 'Source Code Pro' !important;
 }
 
 .hyperLink {

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

@@ -43,8 +43,7 @@ function AIInput({
   onClickOutside,
   startRecording,
   loading,
-  isMobile,
-  translation
+  isMobile
 }, ref) {
   const {
     theme
@@ -116,7 +115,7 @@ function AIInput({
           children: /*#__PURE__*/_jsx(WaveLoading, {})
         }) : /*#__PURE__*/_jsx(TextareaAutosize, {
           className: "ai-input",
-          placeholder: translation("askAItoWrite"),
+          placeholder: "Ask AI to write anything...",
           ref: inputRef,
           value: inputValue,
           onChange: onInputChange,
@@ -151,8 +150,7 @@ function AIInput({
       children: /*#__PURE__*/_jsx(CustomSelect, {
         ...props,
         onSend: onSend,
-        classes: classes,
-        translation: translation
+        classes: classes
       })
     })]
   });

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

@@ -9,8 +9,7 @@ function CustomSelect({
   options,
   onSend,
   show,
-  btnProps = {},
-  translation
+  btnProps = {}
 }) {
   if (show) {
     return /*#__PURE__*/_jsx(Box, {
@@ -32,8 +31,7 @@ function CustomSelect({
               option: option,
               classes: classes,
               onSend: onSend,
-              btnProps: btnProps,
-              translation: translation
+              btnProps: btnProps
             }, i);
           })]
         }, index);
@@ -48,8 +46,7 @@ function DisplayOption({
   option,
   classes,
   onSend,
-  btnProps = {},
-  translation
+  btnProps = {}
 }) {
   const {
     Icon,
@@ -88,7 +85,7 @@ function DisplayOption({
       children: [/*#__PURE__*/_jsxs("div", {
         className: "option-label",
         id: "infinity-select-popover",
-        children: [Icon && /*#__PURE__*/_jsx(Icon, {}), translation(option.label)]
+        children: [Icon && /*#__PURE__*/_jsx(Icon, {}), option.label]
       }), showChild ? /*#__PURE__*/_jsx(IconButton, {
         children: /*#__PURE__*/_jsx(FaChevronRight, {
           color: "#94A3B8",
@@ -111,8 +108,7 @@ function DisplayOption({
           options: option.options,
           onSend: onSend,
           classes: classes,
-          show: open,
-          translation: translation
+          show: open
         })
       })
     })]