@flozy/editor 2.0.7 → 2.0.9

package/dist/Editor/CommonEditor.js

@@ -1,6 +1,6 @@
 /* eslint-disable no-unused-vars */
 import React, { useRef, useCallback, useEffect, useMemo, useState, forwardRef, useImperativeHandle } from "react";
-import { createEditor, Editor, Transforms } from "slate";
+import { createEditor, Transforms } from "slate";
 import { Slate, Editable, ReactEditor } from "slate-react";
 import { useDebounce } from "use-debounce";
 import { getMarked, getBlock } from "./utils/SlateUtilityFunctions";
@@ -129,7 +129,7 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
     }
   };
   const classes = editorStyles({
-    padHeight: !fullScreen ? otherProps?.padHeight : 120,
+    padHeight: !fullScreen ? otherProps?.padHeight : 20,
     placeHolderColor: invertColor(pageColor || "#FFF"),
     theme
   });

package/dist/Editor/DialogWrapper.js

@@ -41,9 +41,6 @@ const DialogWrapper = props => {
         })
       })
     }), /*#__PURE__*/_jsx(DialogContent, {
-      style: {
-        paddingTop: "12px"
-      },
       children: children
     })]
   }) : children;

package/dist/Editor/Editor.css

@@ -1102,3 +1102,10 @@ blockquote {
       0 0 #e3aad6;
   }
 }
+
+.doublequote::before {
+  content: '\201C';
+}
+.doublequote::after {
+  content: '\201D';
+}

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

@@ -165,7 +165,7 @@ const EditorButton = props => {
             background: bgColor || "rgb(30, 75, 122)",
             borderBlockStyle: "solid",
             borderColor: borderColor || "transparent",
-            borderWidth: borderWidth || "1px",
+            borderWidth: borderWidth !== undefined ? borderWidth : borderColor ? "1px" : "0px",
             borderRadius: {
               ...getBreakPointsValue(borderRadius || {}, null, "overrideBorderRadius", true)
             },

package/dist/Editor/Elements/Embed/Video.js

@@ -27,7 +27,8 @@ const Video = ({
     borderColor,
     borderStyle,
     url,
-    xsHidden
+    xsHidden,
+    width: oldWidth
   } = element;
   const editor = useSlateStatic();
   const [openSetttings, setOpenSettings] = useState(false);
@@ -40,9 +41,18 @@ const Video = ({
     horizantal
   } = alignment || {};
   const path = ReactEditor.findPath(editor, element);
+  const getSize = () => {
+    if (element?.size === undefined) {
+      return {
+        widthInPercent: parseInt(oldWidth)
+      };
+    } else {
+      return element?.size || {};
+    }
+  };
   const [size, onMouseDown, resizing, onLoad] = useResize({
     parentDOM,
-    size: element?.size,
+    size: getSize(),
     onChange: uSize => {
       Transforms.setNodes(editor, {
         size: uSize
@@ -113,10 +123,10 @@ const Video = ({
     } else {
       return {
         width: {
-          ...getBreakPointsValue(element?.size, null, "overrideReSize", true)
+          ...getBreakPointsValue(getSize(), null, "overrideReSize", true)
         },
         height: url ? {
-          ...getBreakPointsValue(element?.size, null, "overrideReSizeH", true)
+          ...getBreakPointsValue(getSize(), null, "overrideReSizeH", true)
         } : "auto"
       };
     }
@@ -175,6 +185,8 @@ const Video = ({
         xs: xsHidden ? "none" : "flex"
       },
       flexDirection: "row",
+      flexWrap: "wrap",
+      // to support oldWidth with link
       width: `100%`,
       justifyContent: horizantal,
       alignContent: vertical

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

@@ -323,7 +323,7 @@ const Grid = props => {
         flexWrap: {
           ...getBreakPointsValue(flexWrap || "wrap")
         },
-        height: "fit-content"
+        height: "auto"
       },
       "data-path": path.join(","),
       children: children

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

@@ -51,7 +51,6 @@ const GridItem = props => {
   const selected = hoverPath === path.join(",");
   const [showTool] = useEditorSelection(editor);
   const isEmpty = !readOnly && isEmptyNode(editor, element?.children, path) ? "empty" : "";
-  console.log(cellGHeight);
   const GridItemToolbar = () => {
     return selected && !showTool ? /*#__PURE__*/_jsx("div", {
       contentEditable: false,

package/dist/Editor/Styles/EditorStyles.js

@@ -234,8 +234,11 @@ const editorStyles = ({
       "& .MuiDialogTitle-root": {
         position: "absolute",
         top: 0,
-        right: "12px",
+        right: "0px",
         zIndex: 100
+      },
+      "& .MuiDialogContent-root": {
+        padding: "0px"
       }
     }
   }

package/dist/Editor/Toolbar/FormatTools/BlockButton.js

@@ -1,19 +1,27 @@
 import React from "react";
 import Icon from "../../common/Icon";
 import Button from "../../common/Button";
-import { toggleBlock, isBlockActive } from "../../utils/SlateUtilityFunctions.js";
+import { toggleBlock, isBlockActive, isMarkActive, toggleMark } from "../../utils/SlateUtilityFunctions.js";
 import { jsx as _jsx } from "react/jsx-runtime";
-const BlockButton = ({
-  editor,
-  format,
-  title
-}) => {
+const MARK_TYPES = ["doublequote"];
+const BlockButton = props => {
+  const {
+    editor,
+    format,
+    title
+  } = props;
+  const isMark = MARK_TYPES?.indexOf(format) >= 0;
+  const isActive = isMark ? isMarkActive(editor, format) : isBlockActive(editor, format);
   return /*#__PURE__*/_jsx(Button, {
-    active: isBlockActive(editor, format),
+    active: isActive,
     format: format,
     onMouseDown: e => {
       e.preventDefault();
-      toggleBlock(editor, format);
+      if (isMark) {
+        toggleMark(editor, format);
+      } else {
+        toggleBlock(editor, format);
+      }
     },
     title: title,
     children: /*#__PURE__*/_jsx(Icon, {

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

@@ -1,5 +1,5 @@
 import React from "react";
-import { Grid } from "@mui/material";
+import { Grid, Box } from "@mui/material";
 import { toolbarGroups } from "../toolbarGroups";
 import { RenderToolbarIcon } from "../Toolbar";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -17,6 +17,7 @@ const AddElements = props => {
   const filteredElements = elements.filter(f => (hideTools || []).indexOf(f.type) === -1);
   return /*#__PURE__*/_jsx(Grid, {
     container: true,
+    className: "elements-wrpr-pp",
     sx: classes.textFormatWrapper,
     spacing: 2,
     style: {
@@ -24,8 +25,11 @@ const AddElements = props => {
     },
     children: filteredElements.map(m => {
       return /*#__PURE__*/_jsx(Grid, {
+        className: "ele-item-single",
         item: true,
         xs: 6,
+        md: 4,
+        lg: 4,
         children: /*#__PURE__*/_jsx(RenderToolbarIcon, {
           editor: editor,
           element: m,

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

@@ -5,6 +5,14 @@ import FullViewCard from "./FullViewCard";
 import ButtonTemplateCard from "./ButtonTemplatesCard";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
+const CATEGORIES_SORT_INDEX = {
+  Brief: 1,
+  Buttons: 2,
+  Banners: 3,
+  Tables: 4,
+  Contract: 5,
+  Proposal: 6
+};
 const Categories = props => {
   const {
     value,
@@ -65,6 +73,9 @@ const AddTemplates = props => {
   useEffect(() => {
     getTemplatesList();
   }, []);
+  const sortCategory = (a, b) => {
+    return (CATEGORIES_SORT_INDEX[a] || Infinity) - (CATEGORIES_SORT_INDEX[b] || Infinity);
+  };
   const getTemplatesList = async () => {
     setLoading(true);
     const result = await services("listTemplates", {});
@@ -74,7 +85,7 @@ const AddTemplates = props => {
         a.push(b.category);
       }
       return a;
-    }, []);
+    }, []).sort(sortCategory);
     const ft = tempList?.filter(f => f.category === lic[0]);
     setTemplates(tempList);
     setCategories(lic);

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

@@ -50,9 +50,22 @@ const usePopupStyle = theme => ({
   textFormatWrapper: {
     padding: "0px 16px 16px 16px",
     width: "370px",
+    maxWidth: "100%",
     // 30% of window height
     maxHeight: `${window.innerHeight * 0.45}px`,
     overflow: "auto",
+    "&.elements-wrpr-pp": {
+      width: "500px",
+      maxWidth: "100%",
+      "&.fullscreen": {
+        width: "100%",
+        maxHeight: "fit-content"
+      },
+      "& .ele-item-single": {
+        paddingLeft: "4px",
+        paddingTop: "4px"
+      }
+    },
     "&.templates": {
       width: "500px",
       maxWidth: "100%",

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

@@ -8,6 +8,7 @@ import useDrag from "../../hooks/useDrag";
 import PopperHeader from "./PopperHeader";
 import { TableUtil } from "../../utils/table";
 import useWindowResize from "../../hooks/useWindowResize";
+import useEvent from "../../hooks/useKeys";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const PopupTool = props => {
@@ -26,6 +27,7 @@ const PopupTool = props => {
   const id = open ? "popup-edit-tool" : "";
   const table = new TableUtil(editor);
   const [size] = useWindowResize();
+  const [eventKey] = useEvent();
   useEffect(() => {
     if (event === "end" && anchorEl && !open) {
       // for table cell selection
@@ -37,6 +39,11 @@ const PopupTool = props => {
       setOpen(false);
     }
   }, [event, anchorEl]);
+  useEffect(() => {
+    if (eventKey) {
+      setOpen(false);
+    }
+  }, [eventKey]);
   useEffect(() => {
     if (!selection || !inFocus || Range.isCollapsed(selection) || Editor.string(editor, selection) === "") {
       setAnchorEl(null);

package/dist/Editor/Toolbar/toolbarGroups.js

@@ -103,9 +103,9 @@ export const toolbarGroups = [[{
   group: "typography"
 }, {
   id: 14,
-  format: "blockquote",
+  format: "doublequote",
   type: "block",
-  title: "Block Quote",
+  title: "Double Quote",
   group: "typography"
 }], [{
   id: 15,

package/dist/Editor/common/Icon.js

@@ -8,8 +8,8 @@ import { SiLatex } from "react-icons/si";
 import { RiDeleteColumn, RiDeleteRow } from "react-icons/ri";
 import { IoIosImage } from "react-icons/io";
 import { GridIcon, AccordionIcon, SignatureIcon, ButtonIcon, Carousal, FormIcon, BoldIcon, FontFamilyIcon, FontSizeIcon, ImageIcon, ItalicIcon, LinkIcon, StrikethroughIcon, TableIcon, UnderLineIcon, VideoIcon, CheckboxIcon, AppHeader, MoreHorizontal, UploadImage, DocsUpload, LeftArrow, RightArrow, CheckListButton, CheckListButtonActive, ExcelIcon, CsvIcon, DividerIcon } from "./iconslist";
-import ArrowRightIcon from '@mui/icons-material/ArrowRight';
-import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';
+import ArrowRightIcon from "@mui/icons-material/ArrowRight";
+import ArrowDropDownIcon from "@mui/icons-material/ArrowDropDown";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const iconList = {
@@ -51,6 +51,10 @@ const iconList = {
     size: 20,
     fill: "#64748B"
   }),
+  doublequote: /*#__PURE__*/_jsx(MdFormatQuote, {
+    size: 20,
+    fill: "#64748B"
+  }),
   superscript: /*#__PURE__*/_jsx(FaSuperscript, {
     size: 15,
     fill: "#64748B"

package/dist/Editor/helper/deserialize/index.js

@@ -0,0 +1,141 @@
+import { jsx } from "slate-hyperscript";
+const ELEMENT_TAGS = {
+  A: el => ({
+    type: "link",
+    url: el.getAttribute("href")
+  }),
+  BLOCKQUOTE: () => ({
+    type: "quote"
+  }),
+  H1: () => ({
+    type: "headingOne"
+  }),
+  H2: () => ({
+    type: "headingTwo"
+  }),
+  H3: () => ({
+    type: "headingThree"
+  }),
+  H4: () => ({
+    type: "headingFour"
+  }),
+  H5: () => ({
+    type: "headingFive"
+  }),
+  H6: () => ({
+    type: "headingSix"
+  }),
+  IMG: el => ({
+    type: "image",
+    url: el.getAttribute("src")
+  }),
+  LI: () => ({
+    type: "list-item"
+  }),
+  UL: () => ({
+    type: "unorderedList"
+  }),
+  OL: () => ({
+    type: "orderedList"
+  }),
+  P: () => ({
+    type: "paragraph"
+  }),
+  PRE: () => ({
+    type: "code"
+  }),
+  META: () => ({
+    type: "paragraph"
+  }),
+  STYLE: () => ({
+    type: "paragraph"
+  }),
+  "GOOGLE-SHEETS-HTML-ORIGIN": () => ({
+    type: "paragraph"
+  }),
+  TABLE: () => ({
+    type: "table"
+  }),
+  THEAD: () => ({
+    type: "table-head"
+  }),
+  TBODY: () => ({
+    type: "table-body"
+  }),
+  TH: () => ({
+    type: "table-cell"
+  }),
+  TR: () => ({
+    type: "table-row"
+  }),
+  TD: () => ({
+    type: "table-cell"
+  }),
+  COLGROUP: () => ({
+    type: "paragraph"
+  }),
+  COL: () => ({
+    type: "paragraph"
+  })
+};
+
+// COMPAT: `B` is omitted here because Google Docs uses `<b>` in weird ways.
+const TEXT_TAGS = {
+  CODE: () => ({
+    code: true
+  }),
+  DEL: () => ({
+    strikethrough: true
+  }),
+  EM: () => ({
+    italic: true
+  }),
+  I: () => ({
+    italic: true
+  }),
+  S: () => ({
+    strikethrough: true
+  }),
+  STRONG: () => ({
+    bold: true
+  }),
+  U: () => ({
+    underline: true
+  })
+};
+const deserialize = el => {
+  if (el.nodeType === 3) {
+    return el.textContent;
+  } else if (el.nodeType !== 1) {
+    return null;
+  } else if (el.nodeName === "BR") {
+    return "\n";
+  }
+  const {
+    nodeName
+  } = el;
+  let parent = el;
+  console.log(nodeName);
+  if (nodeName === "PRE" && el.childNodes[0] && el.childNodes[0].nodeName === "CODE") {
+    parent = el.childNodes[0];
+  }
+  let children = Array.from(parent.childNodes).map(deserialize).flat();
+  if (children.length === 0) {
+    children = [{
+      text: ""
+    }];
+  }
+  if (el.nodeName === "BODY") {
+    return jsx("fragment", {}, children);
+  }
+  if (ELEMENT_TAGS[nodeName]) {
+    const attrs = ELEMENT_TAGS[nodeName](el);
+    return jsx("element", attrs, children);
+  }
+  if (TEXT_TAGS[nodeName]) {
+    const attrs = TEXT_TAGS[nodeName](el);
+    return children.map(child => jsx("text", attrs, child));
+  }
+  return children;
+};
+export default deserialize;

package/dist/Editor/hooks/useKeys.js

@@ -0,0 +1,21 @@
+import { useEffect, useState } from "react";
+const useEvent = () => {
+  const [event, setEvent] = useState("");
+  useEffect(() => {
+    addListener();
+    return () => {
+      removeListener();
+    };
+  }, []);
+  const onKeyUp = e => {
+    setEvent(e.keyCode);
+  };
+  const addListener = () => {
+    document.addEventListener("keyup", onKeyUp);
+  };
+  const removeListener = () => {
+    document.removeEventListener("keyup", onKeyUp);
+  };
+  return [event];
+};
+export default useEvent;

package/dist/Editor/hooks/withCommon.js

@@ -6,9 +6,8 @@ import withEmbeds from "../plugins/withEmbeds";
 import withEquation from "../plugins/withEquation";
 import withMentions from "../plugins/withMentions";
 import withLayout from "../plugins/withLayout";
-// import { withLinkify } from '@mercuriya/slate-linkify';
-
+import withHtml from "../plugins/withHTML";
 const withCommon = (props, rest = {}) => {
-  return rest.needLayout ? withEquation(withLayout(withHistory(withEmbeds(withTables(withLinks(withMentions(withReact(props)))))))) : withEquation(withHistory(withEmbeds(withTables(withLinks(withMentions(withReact(props)))))));
+  return rest.needLayout ? withHtml(withEquation(withLayout(withHistory(withEmbeds(withTables(withLinks(withMentions(withReact(props))))))))) : withHtml(withEquation(withHistory(withEmbeds(withTables(withLinks(withMentions(withReact(props))))))));
 };
 export default withCommon;

package/dist/Editor/plugins/withEmbeds.js

@@ -40,9 +40,18 @@ const withEmbeds = editor => {
         select: true // Focus on this node once inserted
       });
     } else {
-      insertBreak(...args);
+      // to disable default leafs
+      Transforms.insertNodes(editor, {
+        type: "paragraph",
+        children: [{
+          text: ""
+        }]
+      }, {
+        select: true // Focus on this node once inserted
+      });
     }
   };
+
   return editor;
 };
 export default withEmbeds;

package/dist/Editor/plugins/withHTML.js

@@ -0,0 +1,43 @@
+import { Transforms, Editor, Element } from "slate";
+import deserialize from "../helper/deserialize";
+const withHtml = editor => {
+  const {
+    insertData,
+    isInline,
+    isVoid
+  } = editor;
+  editor.isInline = element => {
+    return element.type === "link" ? true : isInline(element);
+  };
+  editor.isVoid = element => {
+    return element.type === "image" ? true : isVoid(element);
+  };
+  editor.insertData = data => {
+    const slateHTML = data?.getData("application/x-slate-fragment");
+    const html = data?.getData("text/html");
+    console.log(slateHTML, "****", html);
+    if (slateHTML) {
+      const [tableNode] = Editor.nodes(editor, {
+        match: n => !Editor.isEditor(n) && Element.isElement(n) && n.type === "table"
+      });
+      // do not paste table cell inside table cell
+      // only plain text for internal paste
+      if (tableNode && tableNode[0]) {
+        const text = data?.getData("text/plain");
+        Transforms.insertText(editor, text);
+      } else {
+        insertData(data);
+      }
+    } else if (html) {
+      const parsed = new DOMParser().parseFromString(html, "text/html");
+      console.log(parsed.body);
+      const fragment = deserialize(parsed.body);
+      Transforms.insertFragment(editor, fragment);
+      return;
+    } else {
+      insertData(data);
+    }
+  };
+  return editor;
+};
+export default withHtml;

package/dist/Editor/plugins/withTable.js

@@ -5,15 +5,6 @@ const withTable = editor => {
     deleteBackward,
     deleteForward
   } = editor;
-  editor.insertData = data => {
-    try {
-      const text = data.getData("text/plain");
-      Transforms.insertText(editor, text);
-      return;
-    } catch (err) {
-      console.log(err);
-    }
-  };
   editor.deleteBackward = unit => {
     const {
       selection

package/dist/Editor/utils/SlateUtilityFunctions.js

@@ -39,6 +39,7 @@ import { getBreakPointsValue } from "../helper/theme";
 import Variables from "../Elements/Variables/Variable";
 import insertNewLine from "./insertNewLine";
 import Divider from "../Elements/Divider/Divider";
+import { getBorderColor } from "./helper";
 import { jsx as _jsx } from "react/jsx-runtime";
 const alignment = ["alignLeft", "alignRight", "alignCenter"];
 const list_types = ["orderedList", "unorderedList"];
@@ -160,6 +161,7 @@ export const activeMark = (editor, format) => {
   }
 };
 export const getMarked = (leaf, children) => {
+  const className = leaf?.doublequote ? "doublequote" : "";
   if (leaf.bold) {
     children = /*#__PURE__*/_jsx("strong", {
       children: children
@@ -198,7 +200,9 @@ export const getMarked = (leaf, children) => {
       children: children
     });
   }
-  if (leaf.color) {
+  // cover under single span
+  if (leaf.color || leaf.bgColor || leaf.fontSize || leaf.fontFamily || leaf.fontWeight || className) {
+    const family = fontFamilyMap[leaf?.fontFamily];
     const textStyles = leaf?.color?.indexOf("gradient") >= 0 ? {
       background: leaf?.color?.concat("text"),
       WebkitBackgroundClip: "text",
@@ -206,45 +210,17 @@ export const getMarked = (leaf, children) => {
     } : {
       color: leaf.color
     };
-    children = /*#__PURE__*/_jsx("span", {
-      style: {
-        ...textStyles
-      },
-      children: children
-    });
-  }
-  if (leaf.bgColor) {
-    children = /*#__PURE__*/_jsx("span", {
-      style: {
-        background: leaf.bgColor
-      },
-      children: children
-    });
-  }
-  if (leaf.fontSize) {
     children = /*#__PURE__*/_jsx(Box, {
+      className: className,
       component: "span",
       sx: {
         fontSize: {
           lg: sizeMap[leaf.fontSize] || leaf.fontSize,
           ...getBreakPointsValue(leaf.fontSize, null, "overrideText")
-        }
-      },
-      children: children
-    });
-  }
-  if (leaf.fontFamily) {
-    const family = fontFamilyMap[leaf.fontFamily];
-    children = /*#__PURE__*/_jsx("span", {
-      style: {
-        fontFamily: family
-      },
-      children: children
-    });
-  }
-  if (leaf.fontWeight) {
-    children = /*#__PURE__*/_jsx("span", {
-      style: {
+        },
+        background: leaf.bgColor,
+        ...textStyles,
+        fontFamily: family,
         fontWeight: leaf.fontWeight
       },
       children: children
@@ -300,12 +276,14 @@ export const getBlock = props => {
         ...attributes,
         ...element.attr,
         style: {
-          borderColor: element?.color || "transparent",
+          // borderColor: element?.color || "transparent",
+          ...getBorderColor(element?.color || "transparent", 3),
           background: element?.bgColor || "none",
           padding: `${element?.bgColor ? "16px" : "0px"} 8px`,
           borderRadius: `${element?.color ? "0px" : "12px"} 12px 12px ${element?.color ? "0px" : "12px"}`,
           margin: `${element?.bgColor ? "16px" : "0px"} 0px`,
-          width: element?.bgColor ? "calc(100% - 16px)" : "100%"
+          width: element?.bgColor ? "calc(100% - 16px)" : "100%",
+          borderWidth: element?.color ? "0px 0px 0px 3px" : "0px"
         },
         children: children
       });
@@ -376,6 +354,14 @@ export const getBlock = props => {
       return /*#__PURE__*/_jsx(Table, {
         ...props
       });
+    case "table-head":
+      return /*#__PURE__*/_jsx("thead", {
+        children: children
+      });
+    case "table-body":
+      return /*#__PURE__*/_jsx("tbody", {
+        children: children
+      });
     case "table-row":
       return /*#__PURE__*/_jsx(TableRow, {
         ...props

package/dist/Editor/utils/accordion.js

@@ -1,7 +1,9 @@
 import { Transforms } from "slate";
 import insertNewLine from "./insertNewLine";
+import { getSelectedText } from "./helper";
 export const insertAccordion = (editor, path) => {
   try {
+    const selectedText = getSelectedText(editor);
     const accordion = {
       type: "accordion",
       children: [{
@@ -9,7 +11,7 @@ export const insertAccordion = (editor, path) => {
         children: [{
           type: "paragraph",
           children: [{
-            text: ""
+            text: selectedText || ""
           }]
         }]
       }, {

package/dist/Editor/utils/helper.js

@@ -43,6 +43,19 @@ export const gradientBorder = color => {
     };
   }
 };
+export const getBorderColor = (color, borderWidth = 3) => {
+  if (color?.indexOf("linear") > -1) {
+    return {
+      borderImage: `${color} ${borderWidth}`,
+      borderWidth: `0px 0px 0px ${borderWidth}px`,
+      borderStyle: "solid"
+    };
+  } else {
+    return {
+      borderColor: color || "transparent"
+    };
+  }
+};
 export const absoluteLink = url => {
   try {
     if (url?.indexOf("://") === -1) {

package/dist/Editor/utils/table.js

@@ -390,8 +390,45 @@ export const createTableCell = text => {
     }]
   };
 };
+
+// const createHead = (cellText) => {
+//   const newHead = Array.from(cellText, (value) => createTableHeadCell(value));
+//   return {
+//     type: "table-head",
+//     children: [
+//       {
+//         type: "table-row",
+//         children: newHead,
+//       },
+//     ],
+//   };
+// };
+
+// export const createTableHeadCell = (text) => {
+//   return {
+//     type: "table-cell",
+//     children: [
+//       {
+//         type: "paragraph",
+//         children: [{ text }],
+//       },
+//     ],
+//   };
+// };
+
+// const createTbody = (children) => {
+//   return [
+//     {
+//       type: "table-body",
+//       children: children,
+//     },
+//   ];
+// };
+
 const createTableNode = (cellText, rows, columns) => {
+  // const tableHead = Array.from([cellText[0]], (value) => createHead(value));
   const tableChildren = Array.from(cellText, value => createRow(value));
+  // const tbodyChildren = createTbody(tableChildren);
   let tableNode = {
     type: "table",
     children: tableChildren,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flozy/editor",
-  "version": "2.0.7",
+  "version": "2.0.9",
   "description": "An Editor for flozy app brain",
   "files": [
     "dist"
@@ -41,6 +41,7 @@
     "react-slick": "^0.29.0",
     "slate": "^0.94.1",
     "slate-history": "^0.93.0",
+    "slate-hyperscript": "^0.100.0",
     "slate-react": "^0.98.3",
     "styled-components": "^5.3.11",
     "use-debounce": "^10.0.0",