@flozy/editor 11.0.8 → 11.1.0

package/dist/Editor/ChatEditor.js

@@ -153,6 +153,14 @@ const ChatEditor = /*#__PURE__*/forwardRef((props, ref) => {
     // needLayout = true,
   } = otherProps || {};
   const mentionsRef = useRef();
+  const customProps = {
+    ...(otherProps || {}),
+    hideTools: ["settings", "add_column", "drag", "resize"],
+    readOnly: isReadOnly,
+    editorPlaceholder: "Write Something",
+    page_id: 1,
+    translation: translation || translationMock
+  };
   const [mentions, setMentions] = useMentions({
     editor,
     selection: editor?.selection
@@ -214,15 +222,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);
   };
@@ -298,10 +297,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,
@@ -315,13 +314,13 @@ const ChatEditor = /*#__PURE__*/forwardRef((props, ref) => {
         closeMainPopup: handleClose,
         customProps: customProps
       }), /*#__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,

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 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";
@@ -42,7 +42,6 @@ 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);
@@ -87,7 +86,6 @@ const updateTopBanner = (content = [], setTopBanner) => {
     return firstNode?.type === "topbanner" ? firstNode : null;
   });
 };
-const dummyTranslation = () => {};
 const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
   const {
     id,
@@ -109,8 +107,7 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
   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);
@@ -220,11 +217,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
@@ -235,18 +232,14 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
     return {
       value: JSON.stringify(val),
       text: text,
-      title: serializeToText(title?.children) || ""
+      title: serializeToText(title?.children) || "Untitled"
     };
   };
   const getPreviewImage = async (needBackground = false, options = {}) => {
     ReactEditor.blur(editor);
     const dom = needBackground ? editorWrapper?.current : editorWrapper?.current.getElementsByClassName("innert-editor-textbox")[0];
-    const pageBg = options?.fromBrains ? {
-      pageColor
-    } : {};
     const c = await getThumbnailImage(dom, {
       ...options,
-      ...pageBg,
       proxy: `${otherProps?.PAGES_API_HOST}/page/2canvas`
     });
     return c;
@@ -585,62 +578,13 @@ 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: [/*#__PURE__*/_jsx(FontLoader, {
-      otherProps: {
-        services: otherProps?.services
-      },
-      readOnly: readOnly
-    }), showThemeButtons ? /*#__PURE__*/_jsxs("div", {
+    children: [showThemeButtons ? /*#__PURE__*/_jsxs("div", {
       className: "theme-buttons",
       children: [/*#__PURE__*/_jsx(IconButton, {
         onClick: () => setOpenTheme(true),
@@ -653,7 +597,12 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
         },
         children: /*#__PURE__*/_jsx(ThemeAIIcon, {})
       })]
-    }) : null, /*#__PURE__*/_jsx(DialogWrapper, {
+    }) : null, /*#__PURE__*/_jsx(FontLoader, {
+      otherProps: {
+        services: otherProps?.services
+      },
+      readOnly: readOnly
+    }), /*#__PURE__*/_jsx(DialogWrapper, {
       classes: classes,
       ...props,
       fullScreen: fullScreen,
@@ -741,8 +690,8 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
                         chars: chars,
                         type: type,
                         theme: theme,
-                        customProps: customProps,
-                        otherProps: customProps
+                        otherProps: customProps,
+                        customProps: customProps
                       }) : null, /*#__PURE__*/_jsx(RnDCopy, {
                         readOnly: readOnly
                       })]
@@ -785,9 +734,8 @@ 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: translationFn
               }) : null]

package/dist/Editor/Editor.css

@@ -1132,8 +1132,6 @@ blockquote {
   margin: 0px;
 }
 
-
-
 .content-editable.empty {
   position: relative;
 }
@@ -1370,13 +1368,20 @@ 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;
 }
+code.markcode {
+  border-radius: 4px;
+  padding: 6px 8px;
+  margin: 8px 0px;
+  display: block;
+  background-color: #f3f3f3;
+  font-family: 'Source Code Pro' !important;
+}
 
 .theme-buttons {
   display: flex;
@@ -1403,7 +1408,7 @@ code.markcode {
 
 .truncateText {
   display: inline-block;
-  width: 380px;
+  width: 100%;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;

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

@@ -167,7 +167,6 @@ function PopoverAIInput({
   const [generatedText, setGeneratedText] = useState("");
   const [inputValue, setInputValue] = useState("");
   const [selectedOption, setSelectedOption] = useState();
-  const [threadId, setThreadId] = useState("");
   const selectedEleRef = useRef({});
   const classes = Styles();
   const editor = useSlate();
@@ -189,7 +188,6 @@ function PopoverAIInput({
   useEffect(() => {
     if (openAI) {
       scrollToAIInput(editor);
-      setThreadId("");
     }
   }, [openAI]);
   useEffect(() => {
@@ -198,12 +196,8 @@ function PopoverAIInput({
   const framePayload = (type, option) => {
     let payload = {
       mode: option.mode || 0,
-      query: option?.inputValue || inputValue,
-      useSession: true
+      query: option?.inputValue || inputValue
     };
-    if (threadId) {
-      payload.threadId = threadId;
-    }
     if (option.mode === MODES.translate || option.mode === MODES.rephraseTone) {
       payload.textOptionInput = type;
     }
@@ -263,14 +257,12 @@ function PopoverAIInput({
       setLoading(false);
       setInputValue("");
       let {
-        body: text,
-        threadId
-      } = result?.data || {};
+        data: text
+      } = result || {};
       if (!text) {
         onClickOutside();
         return;
       }
-      setThreadId(threadId || "");
 
       // if (!option.replace) {
       if (type === "continue_writing") {

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

@@ -145,7 +145,6 @@ const Styles = theme => ({
     "& .option-label": {
       display: "flex",
       alignItems: "center",
-      whiteSpace: 'nowrap',
       gap: "8px"
     },
     "&:hover": {

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

@@ -1,12 +1,12 @@
-import React, { useState } from "react";
-import { Transforms } from "slate";
-import { useSlateStatic, ReactEditor } from "slate-react";
+import React, { useEffect, useState } from "react";
+import { Editor, Range, Transforms } from "slate";
+import { useSelected, useSlateStatic, ReactEditor } from "slate-react";
 import AccordionBtnPopup from "./AccordionBtnPopup";
 import { IconButton, Tooltip, Box } from "@mui/material";
 import DeleteIcon from "@mui/icons-material/Delete";
 import { GridSettingsIcon } from "../../common/iconslist";
 import Icon from "../../common/Icon";
-import { useEditorContext } from "../../hooks/useMouseMove";
+import { useEditorContext, useEditorSelection } from "../../hooks/useMouseMove";
 import useCommonStyle from "../../commonStyle";
 import { getBorderColor, getTextColor } from "../../helper";
 import { getBreakPointsValue, getTRBLBreakPoints } from "../../helper/theme";
@@ -75,6 +75,8 @@ const Accordion = props => {
   const [toggle, setToggle] = useState(false);
   const [openSetttings, setOpenSettings] = useState(false);
   const editor = useSlateStatic();
+  const [showTool] = useEditorSelection(editor);
+  const selected = useSelected();
   const path = ReactEditor.findPath(editor, element);
   const {
     textColor,
@@ -92,33 +94,25 @@ const Accordion = props => {
     theme
   } = useEditorContext();
   const classes = useCommonStyle(theme);
-
-  // useEffect(() => {
-  //   if (!editor.selection || !children[1]) return;
-
-  //   try {
-  //     const accordionDetailsElement = element.children?.[1];
-
-  //     const detailsPath = ReactEditor.findPath(editor, accordionDetailsElement);
-
-  //     const detailsRange = Editor.range(editor, detailsPath);
-
-  //     const isInside = Range.intersection(detailsRange, editor.selection);
-
-  //     if (isInside && !toggle) {
-  //       setToggle(true);
-  //     }
-  //   } catch (e) {
-  //     console.error(e);
-  //   }
-  // }, [editor.selection, children]);
-
+  useEffect(() => {
+    if (!editor.selection || !children[1]) return;
+    try {
+      const accordionDetailsElement = element.children?.[1];
+      const detailsPath = ReactEditor.findPath(editor, accordionDetailsElement);
+      const detailsRange = Editor.range(editor, detailsPath);
+      const isInside = Range.intersection(detailsRange, editor.selection);
+      if (isInside && !toggle) {
+        setToggle(true);
+      }
+    } catch (e) {
+      console.error(e);
+    }
+  }, [editor.selection, children]);
   const onToggle = () => {
     setToggle(!toggle);
-    Transforms.deselect(editor);
   };
   const ToolBar = () => {
-    return toggle ? /*#__PURE__*/_jsxs("div", {
+    return selected && !showTool ? /*#__PURE__*/_jsxs("div", {
       className: "element-toolbar hr",
       contentEditable: false,
       style: {
@@ -212,6 +206,7 @@ const Accordion = props => {
       className: "accordion-title"
       // style={{ background: bgColor, ...borderStyle }}
       ,
+      onClick: onToggle,
       children: [/*#__PURE__*/_jsx(Box, {
         role: "button",
         className: "accordion-summary-collapse-btn",
@@ -226,7 +221,6 @@ const Accordion = props => {
           },
           cursor: "pointer"
         },
-        onClick: onToggle,
         children: !toggle ? /*#__PURE__*/_jsx(Icon, {
           icon: "accordionArrow"
         }) : /*#__PURE__*/_jsx(Icon, {

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

@@ -1,5 +1,5 @@
 import React from "react";
-import { insertAccordion, toggleAccordion } from "../../utils/accordion";
+import { insertAccordion } from "../../utils/accordion";
 import ToolbarIcon from "../../common/ToolbarIcon";
 import Icon from "../../common/Icon";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -7,22 +7,13 @@ const AccordionButton = props => {
   const {
     editor,
     icoBtnType,
-    customProps,
-    commonProps
+    customProps
   } = props;
   const {
     translation
   } = customProps;
-  const {
-    listType
-  } = commonProps || {};
-  const isAccordion = listType === "accordion-summary";
   const handleInsertAccordion = () => {
-    if (isAccordion) {
-      toggleAccordion(editor);
-    } else {
-      insertAccordion(editor);
-    }
+    insertAccordion(editor);
   };
   return /*#__PURE__*/_jsx(ToolbarIcon, {
     icon: /*#__PURE__*/_jsx(Icon, {

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

@@ -174,7 +174,6 @@ const EditorButton = props => {
                 display: "inline-flex",
                 color: "rgba(0, 0, 0, 0.54)",
                 marginBottom: "0px !important",
-                ...classes.buttonMoreOption,
                 ...classes.buttonMoreOption3
               },
               ...btnProps,