@flozy/editor 1.7.9 → 1.8.1

package/dist/Editor/CommonEditor.js

@@ -346,11 +346,11 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
           onChange: handleEditorChange,
           children: [/*#__PURE__*/_jsx(DragAndDrop, {
             children: /*#__PURE__*/_jsx(Overlay, {
-              children: /*#__PURE__*/_jsxs(Box, {
+              children: /*#__PURE__*/_jsx(Box, {
                 className: `${hasTopBanner() ? "has-topbanner" : ""}`,
                 sx: classes.slateWrapper,
                 id: "slate-wrapper-scroll-container",
-                children: [/*#__PURE__*/_jsxs(Box, {
+                children: /*#__PURE__*/_jsxs(Box, {
                   component: "div",
                   className: "max-content",
                   children: [renderTopBanner(), /*#__PURE__*/_jsx("div", {
@@ -397,15 +397,16 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
                   }), !readOnly ? /*#__PURE__*/_jsx(MiniToolbar, {
                     customProps: customProps,
                     toolbarOptions: toolbarOptions
-                  }) : null]
-                }), readOnly && /*#__PURE__*/_jsx(Typography, {
-                  sx: {
-                    color: "rgb(100, 116, 139)",
-                    fontSize: "13px"
-                  },
-                  align: "center",
-                  children: footer
-                })]
+                  }) : null, footer && /*#__PURE__*/_jsx(Typography, {
+                    sx: {
+                      color: "rgb(100, 116, 139)",
+                      fontSize: "13px",
+                      paddingBottom: "12px"
+                    },
+                    align: "center",
+                    children: footer
+                  })]
+                })
               })
             })
           }), htmlAction.showInput && /*#__PURE__*/_jsx(CodeToText, {

package/dist/Editor/Elements/Attachments/Attachments.js

@@ -17,7 +17,7 @@ const Attachments = props => {
     date
   } = element;
   const getLastName = url?.split("/").pop();
-  const fileName = `${getLastName}`;
+  const fileName = `${decodeURI(getLastName)}`;
   return /*#__PURE__*/_jsxs(Box, {
     component: "div",
     className: "attachment-wrpr-ev2",

package/dist/Editor/Elements/Carousel/CarouselItem.js

@@ -57,7 +57,7 @@ const CarouselItem = props => {
       className: "carousel-item-inner",
       style: {
         minHeight: "50px",
-        display: "flex",
+        display: "block",
         justifyContent: "center",
         alignItems: "center"
       },

package/dist/Editor/Elements/SimpleText.js

@@ -3,6 +3,7 @@ import { useSlateStatic, useSelected, ReactEditor } from "slate-react";
 import { Box } from "@mui/material";
 import { getPageSettings } from "../utils/pageSettings";
 import { invertColor } from "../helper";
+import { isTextSelected } from "../utils/helper";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const SimpleTextStyle = ({
@@ -68,8 +69,9 @@ const SimpleText = props => {
   });
   const selected = useSelected();
   const path = ReactEditor.findPath(editor, element);
-  const showPlaceHolder = !readOnly && path.length === 1 && isEmpty && selected;
+  const showPlaceHolder = !readOnly && path.length === 1 && isEmpty;
   const isEmptyEditor = !readOnly && isEmpty && editor.children.length === 1 && !selected;
+  const opacity = !isTextSelected(editor?.selection);
   return /*#__PURE__*/_jsxs(Box, {
     ...element.attr,
     ...attributes,
@@ -77,7 +79,7 @@ const SimpleText = props => {
     sx: classes.root,
     children: [children, /*#__PURE__*/_jsx("span", {
       className: "placeholder-simple-text",
-      children: isEmptyEditor ? editorPlaceholder || "Write Something..." : showPlaceHolder ? "Type / to browse elements" : ""
+      children: isEmptyEditor ? editorPlaceholder || "Write Something..." : showPlaceHolder ? opacity && selected ? "Type / to browse elements" : "" : ""
     })]
   });
 };

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

@@ -109,7 +109,6 @@ const TableCell = props => {
     width: size?.width || tableSize?.cellWidth
   } : {};
   const cellBorderColor = borderColor || rowProps?.borderColor || parentProps?.borderColor || entireBorderColor;
-  console.log(borderColor, entireBorderColor);
   return /*#__PURE__*/_jsxs("td", {
     ...element.attr,
     ...attributes,

package/dist/Editor/MiniEditor.js

@@ -1,12 +1,15 @@
 import React, { useCallback, useRef, useState } from "react";
 import { createEditor } from "slate";
-import { Slate, Editable, withReact } from "slate-react";
+import { Slate, Editable } from "slate-react";
 import { getBlock, getMarked } from "./utils/SlateUtilityFunctions";
 import { commands, mentionsEvent } from "./utils/events";
 import useMentions from "./hooks/useMentions";
 import Shorthands from "./common/Shorthands";
-// import withCommon from "./hooks/withCommon";
+import BasicToolbar from "./Toolbar/Basic";
+import withCommon from "./hooks/withCommon";
+import "./Editor.css";
 import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 const initialValue = [{
   type: "paragraph",
   children: [{
@@ -21,6 +24,7 @@ const MiniEditor = props => {
     // editor: collaborativeEditor,
     readOnly,
     miniEditorPlaceholder,
+    toolbars,
     otherProps
   } = props;
   const {
@@ -28,13 +32,9 @@ const MiniEditor = props => {
     // needLayout = true,
   } = otherProps || {};
   const mentionsRef = useRef();
-  const [editor] = useState(() => withReact(createEditor()));
-
-  // const editor = useMemo(() => {
-  //     if (collaborativeEditor) return collaborativeEditor;
-  //     return withCommon(createEditor(), { needLayout });
-  // }, [collaborativeEditor]);
-
+  const [editor] = useState(() => withCommon(createEditor(), {
+    needLayout: false
+  }));
   const isReadOnly = readOnly === "readonly";
   const customProps = {
     ...(otherProps || {}),
@@ -102,14 +102,16 @@ const MiniEditor = props => {
       customProps: customProps
     });
   }, []);
-  return /*#__PURE__*/_jsx(Slate, {
+  return /*#__PURE__*/_jsxs(Slate, {
     editor: editor,
     initialValue: initialValue,
-    children: /*#__PURE__*/_jsx(Editable, {
+    children: [/*#__PURE__*/_jsx(BasicToolbar, {
+      toolbars: toolbars || []
+    }), /*#__PURE__*/_jsx(Editable, {
       renderElement: renderElement,
       renderLeaf: renderLeaf,
       onKeyDown: onKeyDown
-    })
+    })]
   });
 };
 MiniEditor.displayName = "MiniEditor";

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

@@ -0,0 +1,53 @@
+import React, { useState } from "react";
+import { useSlateStatic } from "slate-react";
+import { Box, Tooltip } from "@mui/material";
+import { toolbarGroups } from "../toolbarGroups";
+import { MarkButton } from "../FormatTools";
+import LinkButton from "../../Elements/Link/LinkButton";
+import { addMarkData, isBlockActive } from "../../utils/SlateUtilityFunctions";
+import ColorPickerButton from "../../common/ColorPickerButton";
+import { colors } from "../../Elements/Color Picker/defaultColors";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const allTools = toolbarGroups.flat();
+const BasicToolbar = ({
+  toolbars
+}) => {
+  const editor = useSlateStatic();
+
+  // state
+  const [activeColor, setActiveColor] = useState("#000000");
+  const fontStyle = allTools.filter(f => f.basic);
+  const link = allTools.find(f => f.format?.indexOf("link") >= 0);
+  const handleTextColor = color => {
+    setActiveColor(color);
+    addMarkData(editor, {
+      format: 'color',
+      value: color
+    });
+  };
+  return /*#__PURE__*/_jsxs(Box, {
+    component: 'div',
+    className: "basic-toolbar",
+    children: [fontStyle?.map((m, i) => {
+      return /*#__PURE__*/_jsx(MarkButton, {
+        editor: editor,
+        ...m
+      }, `pptool_mark_${i}_${m.id}`);
+    }), /*#__PURE__*/_jsx(LinkButton, {
+      active: isBlockActive(editor, link.format),
+      editor: editor
+    }, link.id), /*#__PURE__*/_jsx(Tooltip, {
+      arrow: true,
+      title: "Current Color",
+      children: /*#__PURE__*/_jsx(ColorPickerButton, {
+        value: activeColor || "#0000",
+        onSave: color => {
+          handleTextColor(color);
+        },
+        defaultColors: colors
+      })
+    })]
+  });
+};
+export default BasicToolbar;

package/dist/Editor/Toolbar/toolbarGroups.js

@@ -45,12 +45,14 @@ export const toolbarGroups = [[{
   id: 3,
   format: "bold",
   type: "mark",
-  title: "Bold"
+  title: "Bold",
+  basic: true
 }, {
   id: 4,
   format: "italic",
   type: "mark",
-  title: "Italic"
+  title: "Italic",
+  basic: true
 }, {
   id: 5,
   format: "underline",

package/dist/Editor/common/ColorPickerButton.js

@@ -1,14 +1,15 @@
 import React, { useState } from "react";
 import { Grid, Button, Popover } from "@mui/material";
-// import ColorPicker from "react-best-gradient-color-picker";
 import ColorPickerTool from "react-gcolor-picker";
+import { colors } from "../Elements/Color Picker/defaultColors";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
 const ColorPickerButton = props => {
   const {
     value,
-    onSave
+    onSave,
+    defaultColors = []
   } = props;
   const [anchorEl, setAnchorEl] = useState(null);
   const [color, setColor] = useState(value);
@@ -60,7 +61,8 @@ const ColorPickerButton = props => {
             children: /*#__PURE__*/_jsx(ColorPickerTool, {
               gradient: true,
               value: color,
-              onChange: setColor
+              onChange: setColor,
+              defaultColors: defaultColors || []
             })
           }), /*#__PURE__*/_jsxs("div", {
             style: {
@@ -83,4 +85,7 @@ const ColorPickerButton = props => {
     })]
   });
 };
+ColorPickerButton.defaultProps = {
+  defaultColors: [...colors]
+};
 export default ColorPickerButton;

package/dist/Editor/common/Icon.js

@@ -1,6 +1,6 @@
 import React from "react";
 import { MdFormatQuote, MdFormatAlignLeft, MdFormatAlignCenter, MdFormatAlignRight, MdFormatListNumbered, MdFormatListBulleted, MdAdd, MdArrowForward, MdEmojiEmotions, MdOutlinePermMedia } from "react-icons/md";
-import { BsTypeH1, BsTypeH2, BsTypeH3, BsCameraVideoFill, BsArrowBarRight, BsArrowBarLeft } from "react-icons/bs";
+import { BsTypeH1, BsTypeH2, BsTypeH3, BsCameraVideoFill, BsArrowBarRight, BsArrowBarLeft, BsFillMenuButtonWideFill } from "react-icons/bs";
 import { FaSuperscript, FaSubscript } from "react-icons/fa";
 import { FcAddRow, FcAddColumn } from "react-icons/fc";
 import { AiFillEdit, AiOutlineInsertRowBelow, AiOutlineInsertRowRight, AiOutlineDelete, AiFillTag, AiOutlineUpload, AiOutlineArrowsAlt, AiOutlineInsertRowAbove, AiOutlineInsertRowLeft, AiFillHtml5 } from "react-icons/ai";
@@ -183,7 +183,10 @@ const iconList = {
   }),
   appHeader: /*#__PURE__*/_jsx(AppHeader, {}),
   moreHorizantal: /*#__PURE__*/_jsx(MoreHorizontal, {}),
-  docsUpload: /*#__PURE__*/_jsx(DocsUpload, {})
+  docsUpload: /*#__PURE__*/_jsx(DocsUpload, {}),
+  colorbox: /*#__PURE__*/_jsx(BsFillMenuButtonWideFill, {
+    size: 20
+  })
 };
 const Icon = props => {
   const {

package/dist/Editor/common/Shorthands/elements.js

@@ -49,7 +49,7 @@ const ELEMENTS_LIST = [{
   desc: "",
   group: "Text",
   icon: /*#__PURE__*/_jsx(Icon, {
-    icon: "blockquote"
+    icon: "colorbox"
   }),
   onInsert: editor => toggleBlock(editor, "blockquote", false, {
     bgColor: "rgb(227, 236, 255)"

package/dist/Editor/helper/index.js

@@ -76,8 +76,11 @@ export function getEmbedURL(element) {
 }
 export const isEmptyTextNode = element => {
   try {
-    const showPlaceholder = element?.children?.filter(f => HIDE_PLACHOLDERS.indexOf(f.type) > -1).length === 0;
-    return Node.string(element)?.length === 0 && showPlaceholder;
+    if (element) {
+      const showPlaceholder = element?.children?.filter(f => HIDE_PLACHOLDERS.indexOf(f.type) > -1).length === 0;
+      return Node.string(element)?.length === 0 && showPlaceholder;
+    }
+    return false;
   } catch (err) {
     console.log(err);
     return false;

package/dist/Editor/utils/attachments.js

@@ -25,7 +25,6 @@ export const insertAttachments = (editor, data) => {
         ...data,
         type: url?.split(".").pop() === "pdf" ? "pdf" : "docs"
       });
-      console.log(attachmentsNode);
       Transforms.insertNodes(editor, [attachmentsNode]);
       insertNewLine(editor);
     }

package/dist/Editor/utils/helper.js

@@ -52,4 +52,23 @@ export const absoluteLink = url => {
     console.log(err);
     return url;
   }
+};
+export const isTextSelected = selection => {
+  try {
+    const {
+      anchor,
+      focus
+    } = selection || {};
+    if (anchor && focus) {
+      if (JSON.stringify(anchor?.path) !== JSON.stringify(focus?.path)) {
+        return true;
+      }
+      return false;
+    } else {
+      return false;
+    }
+  } catch (err) {
+    console.log(err);
+    return false;
+  }
 };

package/dist/Editor/utils/serializeToHTML.js

@@ -1,5 +1,22 @@
-import { Node } from "slate";
+import { renderToString } from "react-dom/server";
+import { getBlock } from "./SlateUtilityFunctions";
 const serializeToHTML = nodes => {
-  return nodes.map(n => Node.string(n)).join("\n");
+  try {
+    const htmlString = nodes.map(n => {
+      if (n) {
+        const props = {
+          element: n,
+          children: n?.children
+        };
+        const reactString = renderToString(getBlock(props));
+        return reactString;
+      } else {
+        return "";
+      }
+    });
+    console.log(htmlString);
+  } catch (err) {
+    console.log(err);
+  }
 };
 export default serializeToHTML;

package/dist/Editor/utils/table.js

@@ -219,24 +219,21 @@ export class TableUtil {
         });
 
         // cell bg entire
-        if (cellProps?.entireBgColor || tableProps?.borderColor) {
+        if (cellProps?.entireBgColor || tableProps?.borderColor || rowProps?.borderColor) {
           const {
-            rows,
-            columns
+            rows
           } = tableProps;
           for (let r = 0; r < rows; r++) {
-            for (let c = 0; c < columns; c++) {
-              Transforms.setNodes(this.editor, {
-                entireBgColor: cellProps?.entireBgColor
-              }, {
-                at: [currentCellPath[0], r, currentCellPath[2]]
-              });
-            }
+            Transforms.setNodes(this.editor, {
+              entireBgColor: cellProps?.entireBgColor
+            }, {
+              at: [currentCellPath[0], r, currentCellPath[2]]
+            });
           }
         }
 
         // cell border all
-        if (tableProps?.borderColor) {
+        if (tableProps?.borderColor || rowProps?.borderColor) {
           const {
             rows,
             columns
@@ -244,7 +241,8 @@ export class TableUtil {
           for (let r = 0; r < rows; r++) {
             for (let c = 0; c < columns; c++) {
               Transforms.setNodes(this.editor, {
-                entireBorderColor: tableProps?.borderColor
+                entireBorderColor: tableProps?.borderColor,
+                rowBorder: rowProps?.borderColor
               }, {
                 at: [currentCellPath[0], r, c]
               });

package/package.json

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