@flozy/editor 2.0.6 → 2.0.8

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";

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/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/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/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/common/ImageSelector/ImageSelector.js

@@ -69,8 +69,9 @@ const ImageSelector = props => {
           children: /*#__PURE__*/_jsxs(Tabs, {
             sx: classes.tabs,
             onChange: handleTabChange,
-            orientation: "horizontal",
             value: tabValue,
+            variant: "scrollable",
+            scrollButtons: "auto",
             children: [/*#__PURE__*/_jsx(Tab, {
               className: `${isActive("upload")} ${TAB_SHOW[title].indexOf("upload") === -1 ? "hidden" : ""}`,
               sx: classes.tab,

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

@@ -0,0 +1,107 @@
+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"
+  })
+};
+
+// 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;
+  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/withHTML.js

@@ -0,0 +1,41 @@
+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");
+    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");
+      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,17 @@ 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.insertData = (data) => {
+  //   try {
+  //     // const text = data.getData("text/plain");
+  //     Transforms.insertFragment(editor, data);
+  //     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) {
+    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,7 +276,8 @@ 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"}`,

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flozy/editor",
-  "version": "2.0.6",
+  "version": "2.0.8",
   "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",