@flozy/editor 9.2.9 → 9.3.0

package/dist/Editor/ChatEditor.js

@@ -14,6 +14,7 @@ import Shorthands from "./common/Shorthands";
 import usePopupStyle from "./Toolbar/PopupTool/PopupToolStyle";
 import { EditorProvider } from "./hooks/useMouseMove";
 import decorators from "./utils/Decorators";
+import convertMDToHTML from "./helper/markdown";
 import { useDebouncedCallback } from "use-debounce";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -31,7 +32,9 @@ const ChatEditor = /*#__PURE__*/forwardRef((props, ref) => {
     onBlur = () => {},
     isMobile = false,
     debounceTimeOut = 10,
-    translation
+    translation,
+    isMarkDown = false,
+    markDownContent = ''
   } = props;
   const classes = usePopupStyle(theme);
   const convertedContent = draftToSlate({
@@ -42,8 +45,7 @@ const ChatEditor = /*#__PURE__*/forwardRef((props, ref) => {
       }]
     }]
   });
-  const [value] = useState(convertedContent);
-  const debouncedValue = useRef(value);
+  const debouncedValue = useRef(convertedContent);
   const debounced = useDebouncedCallback(
   // function
   value => {
@@ -276,7 +278,8 @@ const ChatEditor = /*#__PURE__*/forwardRef((props, ref) => {
     }
   };
 
-  return /*#__PURE__*/_jsx(EditorProvider, {
+  const html = isMarkDown ? convertMDToHTML(markDownContent) : null;
+  return !isMarkDown ? /*#__PURE__*/_jsx(EditorProvider, {
     theme: theme,
     editor: editor,
     children: /*#__PURE__*/_jsxs(Slate, {
@@ -312,6 +315,14 @@ const ChatEditor = /*#__PURE__*/forwardRef((props, ref) => {
         customProps: customProps
       }) : null]
     }, id)
+  }) : /*#__PURE__*/_jsx("div", {
+    ref: debouncedValue,
+    dangerouslySetInnerHTML: {
+      __html: html || ""
+    },
+    style: {
+      overflow: "hidden"
+    }
   });
 });
 ChatEditor.displayName = "ChatEditor";

package/dist/Editor/CommonEditor.js

@@ -378,7 +378,7 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
     translation: translationFn,
     getTitleSaveData
   };
-  const lineH = getBreakpointLineSpacing(lineHeight, breakpoint);
+  const lineH = getBreakpointLineSpacing(lineHeight, breakpoint || (isMobile ? "xs" : ""));
   const renderElement = useCallback(props => {
     return /*#__PURE__*/_jsx(Element, {
       ...props,

package/dist/Editor/Elements/Table/Table.js

@@ -33,17 +33,15 @@ const ToolTableComponent = props => {
   const {
     updateTableSelection
   } = useTable();
-  return /*#__PURE__*/_jsx("div", {
-    children: /*#__PURE__*/_jsx(TableTool, {
-      theme: editorTheme,
-      handleToolAction: (type, option) => {
-        handleAction(type, option);
-        if (type === "duplicate") {
-          updateTableSelection(getDefaultTableSelection());
-        }
-      },
-      translation: translation
-    })
+  return /*#__PURE__*/_jsx(TableTool, {
+    theme: editorTheme,
+    handleToolAction: (type, option) => {
+      handleAction(type, option);
+      if (type === "duplicate") {
+        updateTableSelection(getDefaultTableSelection());
+      }
+    },
+    translation: translation
   });
 };
 const MoreTableSettings = props => {
@@ -135,6 +133,7 @@ const ToolBar = props => {
       arrow: true,
       onClick: () => handleAction("delete"),
       children: /*#__PURE__*/_jsx(IconButton, {
+        className: "editor-deleteicon",
         children: /*#__PURE__*/_jsx(DeleteIcon, {})
       })
     })

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

@@ -16,7 +16,7 @@ import SelectSuperSubscript from "./MiniTextFormat/SelectSuperSubscript";
 import { ColorResetIcon, TextDefaultStyleIcon } from "../../common/iconListV2";
 import FontFamilyAutocomplete from "../FormatTools/FontFamilyAutocomplete";
 import { useEditorContext } from "../../hooks/useMouseMove";
-// import LineSpacing from "../../common/StyleBuilder/fieldTypes/lineSpacing";
+import LineSpacing from "../../common/StyleBuilder/fieldTypes/lineSpacing";
 import { getPageSettings } from "../../utils/pageSettings";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -38,15 +38,18 @@ const TextFormat = props => {
   const {
     translation
   } = customProps;
-
-  // const { element: pageSt } = getPageSettings(editor) || {};
-  // const pageSettingLine = pageSt?.pageProps?.lineHeight;
+  const {
+    element: pageSt
+  } = getPageSettings(editor) || {};
+  const pageSettingLine = pageSt?.pageProps?.lineHeight;
   const {
     fontFamilies,
     theme: appTheme
   } = useEditorContext();
-  // const { activeBreakPoint } = useEditorContext();
-  // const breakpoint = activeBreakPoint === "" ? "lg" : activeBreakPoint;
+  const {
+    activeBreakPoint
+  } = useEditorContext();
+  const breakpoint = activeBreakPoint === "" ? "lg" : activeBreakPoint;
   const fontWeight = allTools.find(f => f.format === "fontWeight");
   const fontStyle = allTools.filter(f => f.type === "mark" && f.format !== "strikethrough" && f.format !== "superscript" && f.format !== "subscript");
   const fontAlign = allTools.filter(f => f.format?.indexOf("align") >= 0);
@@ -68,12 +71,8 @@ const TextFormat = props => {
     updateTheme
   } = useEditorTheme();
   const customized = isTextCustomized(editor);
-
-  // let lineSpacingValue = activeMark(editor, "lineHeight");
-  // lineSpacingValue =
-  //   lineSpacingValue?.[breakpoint] !== undefined
-  //     ? lineSpacingValue
-  //     : pageSettingLine;
+  let lineSpacingValue = activeMark(editor, "lineHeight");
+  lineSpacingValue = lineSpacingValue?.[breakpoint] !== undefined ? lineSpacingValue : pageSettingLine;
   const handleColorPicker = type => e => {
     setType(type);
     setAnchorEl(e.currentTarget);
@@ -114,11 +113,13 @@ const TextFormat = props => {
       value
     });
   };
-
-  // const handleLineSpacing = (data) => {
-  //   const [[format, value]] = Object.entries(data);
-  //   addMarkData(editor, { format, value });
-  // };
+  const handleLineSpacing = data => {
+    const [[format, value]] = Object.entries(data);
+    addMarkData(editor, {
+      format,
+      value
+    });
+  };
   return /*#__PURE__*/_jsxs(Grid, {
     container: true,
     sx: classes.textFormatWrapper,
@@ -433,6 +434,32 @@ const TextFormat = props => {
       xs: 12,
       sx: classes.dividerGrid,
       children: /*#__PURE__*/_jsx(Divider, {})
+    }), /*#__PURE__*/_jsxs(Grid, {
+      item: true,
+      xs: 12,
+      children: [/*#__PURE__*/_jsx(Typography, {
+        variant: "body1",
+        color: "primary",
+        sx: classes.typoLabel,
+        children: "Line Spacing"
+      }), /*#__PURE__*/_jsx(Grid, {
+        item: true,
+        xs: 12,
+        className: "typo-icons",
+        sx: classes.evenSpace,
+        children: /*#__PURE__*/_jsx(LineSpacing, {
+          value: lineSpacingValue,
+          onChange: handleLineSpacing,
+          data: {
+            key: "lineHeight"
+          }
+        })
+      })]
+    }), /*#__PURE__*/_jsx(Grid, {
+      item: true,
+      xs: 12,
+      sx: classes.dividerGrid,
+      children: /*#__PURE__*/_jsx(Divider, {})
     }), /*#__PURE__*/_jsx(Grid, {
       item: true,
       xs: 12,

package/dist/Editor/common/StyleBuilder/pageSettingsStyle.js

@@ -25,13 +25,11 @@ const pageSettingsStyle = [{
     label: "Padding",
     key: "bannerSpacing",
     type: "bannerSpacing"
-  }
-  // {
-  //   label: "Line Spacing",
-  //   key: "lineHeight",
-  //   type: "lineSpacing",
-  // },
-  ]
+  }, {
+    label: "Line Spacing",
+    key: "lineHeight",
+    type: "lineSpacing"
+  }]
 }, {
   tab: "Max Width",
   value: "maxWidth",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flozy/editor",
-  "version": "9.2.9",
+  "version": "9.3.0",
   "description": "An Editor for flozy app brain",
   "files": [
     "dist"