@flozy/editor 1.4.4 → 1.4.6

package/dist/Editor/CommonEditor.js

@@ -3,6 +3,8 @@ import { createEditor } from "slate";
 import { Slate, Editable, ReactEditor } from "slate-react";
 import { DndContext, DragOverlay } from "@dnd-kit/core";
 import { useDebounce } from "use-debounce";
+// import { onKeyDown as linkifyOnKeyDown } from '@mercuriya/slate-linkify';
+
 import Toolbar from "./Toolbar/Toolbar";
 import { getMarked, getBlock } from "./utils/SlateUtilityFunctions";
 import CodeToText from "./Elements/CodeToText/CodeToText";
@@ -242,6 +244,8 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
         event,
         editor
       });
+    } else {
+      // linkifyOnKeyDown(event, editor);
     }
   }, [chars, editor, target, mentions, setMentions]);
   const handleDragStart = e => {

package/dist/Editor/Editor.css

@@ -97,6 +97,8 @@ blockquote {
   padding: 0px;
   position: relative;
   flex-wrap: wrap;
+  background-repeat: no-repeat;
+  background-size: cover;
 }
 
 .grid-container-toolbar,

package/dist/Editor/Elements/AppHeader/AppHeader.js

@@ -1,6 +1,6 @@
 import React, { useRef, useState } from "react";
 import { useSlateStatic, ReactEditor } from "slate-react";
-import { Transforms } from "slate";
+import { Transforms, Editor, Element } from "slate";
 import AppBar from "@mui/material/AppBar";
 import Box from "@mui/material/Box";
 import CssBaseline from "@mui/material/CssBaseline";
@@ -63,7 +63,8 @@ function AppHeader(props) {
   const handleDrawerToggle = () => {
     setMobileOpen(prevState => !prevState);
   };
-  const onSettings = () => {
+  const onSettings = e => {
+    e.stopPropagation();
     setOpenSettings(true);
   };
   const ToolBar = () => {
@@ -103,7 +104,8 @@ function AppHeader(props) {
     });
     onClose();
   };
-  const onDelete = () => {
+  const onDelete = e => {
+    e.stopPropagation();
     Transforms.removeNodes(editor, {
       at: path
     });
@@ -111,6 +113,20 @@ function AppHeader(props) {
   const onClose = () => {
     setOpenSettings(false);
   };
+  const handleFocus = e => {
+    e.preventDefault();
+    try {
+      const [[, gridItemPath]] = Editor.nodes(editor, {
+        at: path,
+        match: n => !Editor.isEditor(n) && Element.isElement(n) && n.type === "grid-item"
+      });
+      if (gridItemPath) {
+        Transforms.select(editor, gridItemPath);
+      }
+    } catch (err) {
+      console.log(err);
+    }
+  };
 
   // const onMenuSettings = (menuItem, i) => (event) => {
   //   event.preventDefault();
@@ -168,6 +184,7 @@ function AppHeader(props) {
     },
     ...attributes,
     contentEditable: false,
+    onClick: handleFocus,
     children: [/*#__PURE__*/_jsxs("div", {
       ref: navWrprRef,
       style: {

package/dist/Editor/Elements/ChipText/ChipText.js

@@ -1,17 +1,28 @@
-import React from "react";
+import React, { useState } from "react";
+import { Transforms } from "slate";
+import { useSlateStatic, ReactEditor } from "slate-react";
+import * as fIcons from "@mui/icons-material";
+import ChipTextPopup from "./ChipTextPopup";
 import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 const ChipText = props => {
   const {
     attributes,
-    children,
-    element
+    element,
+    customProps,
+    children
   } = props;
+  const {
+    readOnly
+  } = customProps;
   const {
     bgColor,
     textColor,
     bannerSpacing,
     borderRadius,
-    borderColor
+    borderColor,
+    buttonIcon,
+    textSize
   } = element;
   const {
     left,
@@ -25,12 +36,51 @@ const ChipText = props => {
     bottomLeft,
     bottomRight
   } = borderRadius || {};
-  return /*#__PURE__*/_jsx("button", {
+  const BtnIcon = buttonIcon ? fIcons[buttonIcon] : fIcons["Check"];
+  const [openSetttings, setOpenSettings] = useState(false);
+  const editor = useSlateStatic();
+  const path = ReactEditor.findPath(editor, element);
+  const handleStyle = () => {
+    if (!readOnly) {
+      setOpenSettings(true);
+    }
+  };
+  const onClose = () => {
+    setOpenSettings(false);
+  };
+  const onSave = data => {
+    try {
+      const updateData = {
+        ...data
+      };
+      delete updateData.children;
+      Transforms.setNodes(editor, {
+        ...updateData
+      }, {
+        at: path
+      });
+      onClose();
+    } catch (err) {
+      console.log(err);
+    }
+  };
+  const onDelete = () => {
+    try {
+      Transforms.removeNodes(editor, {
+        at: path
+      });
+      onClose();
+    } catch (err) {
+      console.log(err);
+    }
+  };
+  return /*#__PURE__*/_jsxs("button", {
     ...attributes,
     className: "editor-chip-text",
     contentEditable: false,
     style: {
-      display: "inline",
+      display: "inline-block",
+      verticalAlign: "middle",
       paddingLeft: `${left}px`,
       paddingRight: `${right}px`,
       paddingTop: `${top}px`,
@@ -40,10 +90,30 @@ const ChipText = props => {
       background: bgColor || "#CCC",
       color: textColor
     },
-    children: /*#__PURE__*/_jsx("div", {
-      contentEditable: true,
+    children: [/*#__PURE__*/_jsx(BtnIcon, {
+      style: {
+        fontSize: textSize || "16px",
+        lineHeight: textSize || "16px",
+        display: "inline-block",
+        verticalAlign: "middle"
+      },
+      onClick: handleStyle
+    }), /*#__PURE__*/_jsx("div", {
+      contentEditable: false,
+      style: {
+        display: "inline-block",
+        verticalAlign: "middle",
+        fontSize: textSize || "16px",
+        width: "0px"
+      },
       children: children
-    })
+    }), openSetttings !== false ? /*#__PURE__*/_jsx(ChipTextPopup, {
+      element: element || {},
+      onSave: onSave,
+      onClose: onClose,
+      onDelete: onDelete,
+      customProps: customProps
+    }) : null]
   });
 };
 export default ChipText;

package/dist/Editor/Elements/ChipText/ChipTextButton.js

@@ -1,68 +1,29 @@
-import React, { useState } from "react";
-import { Editor, Transforms } from "slate";
+import React from "react";
 import { IconButton } from "@mui/material";
 import SmartButtonIcon from "@mui/icons-material/SmartButton";
-import { insertChipText, removeChipText } from "../../utils/insertChipText";
-import ChipTextPopup from "./ChipTextPopup";
+import { insertChipText } from "../../utils/insertChipText";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
 const ChipTextButton = props => {
   const {
-    editor,
-    customProps
+    editor
   } = props;
-  const [openSetttings, setOpenSettings] = useState(false);
   const handleClick = () => {
-    const [parent, parentPath] = Editor.parent(editor, editor.selection.focus.path);
-    if (parent && parent?.type === "chip-text") {
-      setOpenSettings({
-        element: parent,
-        path: parentPath
-      });
-      // removeChipText(editor, parentPath);
-    } else {
-      insertChipText(editor, {
-        url: "",
-        showInNewTab: false
-      });
-    }
-  };
-  const onSave = data => {
-    const updateData = {
-      ...data
-    };
-    delete updateData.children;
-    Transforms.setNodes(editor, {
-      ...updateData
-    }, {
-      at: openSetttings?.path
+    insertChipText(editor, {
+      url: "",
+      showInNewTab: false
     });
-    onClose();
-  };
-  const onClose = () => {
-    setOpenSettings(false);
-  };
-  const onDelete = () => {
-    removeChipText(editor, openSetttings?.path);
-    onClose();
   };
-  return /*#__PURE__*/_jsxs(_Fragment, {
-    children: [/*#__PURE__*/_jsx(IconButton, {
-      title: "Chip Text",
+  return /*#__PURE__*/_jsx(_Fragment, {
+    children: /*#__PURE__*/_jsx(IconButton, {
+      title: "Icon",
       onClick: handleClick,
       children: /*#__PURE__*/_jsx(SmartButtonIcon, {
         sx: {
-          fill: '#64748B'
+          fill: "#64748B"
         }
       })
-    }), openSetttings !== false ? /*#__PURE__*/_jsx(ChipTextPopup, {
-      element: openSetttings?.element || {},
-      onSave: onSave,
-      onClose: onClose,
-      onDelete: onDelete,
-      customProps: customProps
-    }) : null]
+    })
   });
 };
 export default ChipTextButton;

package/dist/Editor/Elements/Color Picker/ColorPicker.js

@@ -1,16 +1,14 @@
 import React, { useRef, useState } from "react";
 import { ReactEditor } from "slate-react";
 import Button from "../../common/Button";
-import { colors } from "./defaultColors";
 import { addMarkData, activeMark } from "../../utils/SlateUtilityFunctions";
 import { Transforms } from "slate";
 import usePopup from "../../utils/customHooks/usePopup";
 import { logo } from "./LogoIcon";
 import "./ColorPicker.css";
-import { ButtonBase } from "@mui/material";
+import ColorPickerTool from "react-gcolor-picker";
 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 DEFAULT_COLOR = {
   color: "#000000",
   bgcolor: "#FFFFFF"
@@ -22,53 +20,31 @@ const ColorPicker = ({
   title
 }) => {
   const [selection, setSelection] = useState();
-  const [hexValue, setHexValue] = useState("");
-  const [validHex, setValidHex] = useState();
   const colorPickerRef = useRef(null);
   const [showOptions, setShowOptions] = usePopup(colorPickerRef);
-  const isValideHexSix = new RegExp("^#[0-9A-Za-z]{6}");
-  const isValideHexThree = new RegExp("^#[0-9A-Za-z]{3}");
-  const changeColor = e => {
-    const clickedColor = e.target.getAttribute("data-value");
-    selection && Transforms.select(editor, selection);
-    selection && ReactEditor.focus(editor);
-    addMarkData(editor, {
-      format,
-      value: clickedColor
-    });
-    setShowOptions(false);
-  };
-  const toggleOption = () => {
+  const toggleOption = e => {
     setSelection(editor.selection);
     selection && ReactEditor.focus(editor);
     setShowOptions(prev => !prev);
   };
-  const handleFormSubmit = e => {
-    e.preventDefault();
-    if (!validHex) return;
+  const handleFormSubmit = color => {
+    if (!color) return;
     selection && Transforms.select(editor, selection);
     addMarkData(editor, {
       format,
-      value: hexValue
+      value: color
     });
     setShowOptions(false);
-    setValidHex("");
-    setHexValue("");
     selection && ReactEditor.focus(editor);
   };
-  const handleHexChange = e => {
-    e.preventDefault();
-    const newHex = e.target.value;
-    setValidHex(isValideHexSix.test(newHex) || isValideHexThree.test(newHex));
-    setHexValue(newHex);
-  };
   const activeColor = showOptions ? DEFAULT_COLOR[format] : activeMark(editor, format);
   return /*#__PURE__*/_jsxs("div", {
-    className: "color-picker popup-wrapper1 color-picker-dialog",
+    className: "",
     ref: colorPickerRef,
     style: {
       display: "flex",
-      alignItems: "center"
+      alignItems: "center",
+      position: "relative"
     },
     children: [showHex ? /*#__PURE__*/_jsx("div", {
       style: {
@@ -84,59 +60,23 @@ const ColorPicker = ({
       onClick: toggleOption,
       title: title,
       children: logo[format](activeColor)
-    }), showOptions && /*#__PURE__*/_jsxs(_Fragment, {
-      children: [/*#__PURE__*/_jsx("div", {
-        className: "backdrop",
-        onClick: () => {
-          setShowOptions(false);
-        }
-      }), /*#__PURE__*/_jsxs("div", {
-        className: "af-popup",
-        children: [/*#__PURE__*/_jsx("div", {
-          className: "color-options",
-          children: colors.map((color, index) => {
-            return /*#__PURE__*/_jsx("div", {
-              "data-value": color,
-              onClick: changeColor,
-              className: "option",
-              style: {
-                background: color
-              }
-            }, index);
-          })
-        }), /*#__PURE__*/_jsx("p", {
-          style: {
-            textAlign: "center",
-            opacity: "0.7",
-            width: "100%"
-          },
-          children: "or"
-        }), /*#__PURE__*/_jsxs("form", {
-          onSubmit: handleFormSubmit,
-          children: [/*#__PURE__*/_jsx("div", {
-            className: "hexPreview",
-            style: {
-              background: validHex ? hexValue : "#000000"
-            }
-          }), /*#__PURE__*/_jsx("input", {
-            type: "text",
-            placeholder: "#000000",
-            value: hexValue,
-            onChange: handleHexChange,
-            style: {
-              border: validHex === false ? "1px solid red" : "1px solid lightgray"
-            }
-          }), /*#__PURE__*/_jsx(ButtonBase, {
-            className: "colorSaveBtn",
-            style: {
-              background: validHex ? "#2563EB" : "#64748B",
-              color: "#fff"
-            },
-            type: "submit",
-            children: "Save"
-          })]
-        })]
-      })]
+    }), showOptions && /*#__PURE__*/_jsx("div", {
+      style: {
+        position: "fixed",
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        margin: "auto",
+        zIndex: 100,
+        width: "300px",
+        height: "300px"
+      },
+      children: /*#__PURE__*/_jsx(ColorPickerTool, {
+        gradient: true,
+        value: activeColor,
+        onChange: handleFormSubmit
+      })
     })]
   });
 };

package/dist/Editor/Elements/Embed/Embed.css

@@ -1,13 +1,16 @@
-.embed{
+.embed {
     width: fit-content;
     position: relative;
     margin: 0px;
 }
-.embed img,.embed iframe{
+
+.embed img,
+.embed iframe {
     width: 100%;
-    height:100%;
+    height: 100%;
 }
-.embed button.resize{
+
+.embed button.resize {
     position: absolute;
     bottom: 2px;
     right: 2px;
@@ -27,8 +30,53 @@
 
 .image-text {
     padding: 12px;
-    background-color: rgba(0,0,0,0.5);
+    background-color: rgba(0, 0, 0, 0.5);
     margin: 0px;
     color: #FFF;
     font-weight: bold;
+}
+
+.link-embed-wrapper iframe {
+    width: 100%;
+    height: 100%;
+}
+
+.link-embed-wrapper {
+    width: 100%;
+    height: 100%;
+}
+
+.link-embed-wrapper iframe {
+    aspect-ratio: 16/9;
+}
+
+.link-embed-wrapper .deleteButton {
+    background-color: white;
+    /* box-shadow: 0px 0px 8px #ccc; */
+    padding: 5px;
+    width: 26px;
+    height: 26px;
+}
+
+.link-embed-wrapper-container {
+    position: relative;
+    display: flex;
+    width: 100%;
+    height: 100%;
+}
+
+.link-embed-wrapper-container .docDeleteContainer {
+    display: none;
+}
+
+.link-embed-wrapper-hover-container:hover .docDeleteContainer {
+    display: block;
+    position: absolute;
+    top: -16px;
+    right: 0;
+    background-color: white;
+}
+
+.link-embed-wrapper-hover-container:hover .link-embed-wrapper {
+    padding-top: 24px;
 }

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

@@ -0,0 +1,58 @@
+import { Grid, IconButton, Tooltip } from '@mui/material';
+import React from 'react';
+import { Transforms } from 'slate';
+import { ReactEditor, useSlateStatic } from 'slate-react';
+import DeleteIcon from "@mui/icons-material/Delete";
+import "./Embed.css";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const EmbedLink = ({
+  attributes,
+  element,
+  children,
+  customProps: {
+    readOnly
+  }
+}) => {
+  const {
+    url,
+    width,
+    height
+  } = element;
+  const editor = useSlateStatic();
+  const path = ReactEditor.findPath(editor, element);
+  return /*#__PURE__*/_jsxs("div", {
+    ...attributes,
+    className: `link-embed-wrapper-container ${!readOnly ? 'link-embed-wrapper-hover-container' : ''}`,
+    style: {
+      height: height,
+      width: width
+    },
+    children: [/*#__PURE__*/_jsxs("div", {
+      className: "link-embed-wrapper",
+      children: [/*#__PURE__*/_jsx("iframe", {
+        src: url.includes('http') ? url : `//${url}`,
+        frameBorder: "0",
+        title: url
+      }), /*#__PURE__*/_jsx(Grid, {
+        className: "docDeleteContainer",
+        children: /*#__PURE__*/_jsx(Tooltip, {
+          title: "Delete",
+          arrow: true,
+          children: /*#__PURE__*/_jsx(IconButton
+          // className='deleteButton'
+          , {
+            onClick: () => {
+              Transforms.removeNodes(editor, {
+                at: path
+              });
+              ReactEditor.focus(editor);
+            },
+            children: /*#__PURE__*/_jsx(DeleteIcon, {})
+          })
+        })
+      })]
+    }), children]
+  });
+};
+export default EmbedLink;

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

@@ -43,6 +43,12 @@ const GridItem = props => {
     horizantal,
     flexDirection
   } = alignment || {};
+  const {
+    topLeft,
+    topRight,
+    bottomLeft,
+    bottomRight
+  } = borderRadius || {};
   const editor = useSlateStatic();
   const selected = useSelected();
   const itemWidth = (grid || 6) / 12 * 100;
@@ -98,7 +104,7 @@ const GridItem = props => {
     sx: {
       display: "flex",
       flexDirection: flexDirection || "column",
-      backgroundColor: bgColor || "transparent",
+      background: bgColor || "transparent",
       alignItems: horizantal,
       justifyContent: vertical,
       width: `${itemWidth}%`,
@@ -129,7 +135,7 @@ const GridItem = props => {
         height: gridHeight || "auto",
         borderColor: borderColor || "transparent",
         borderWidth: borderWidth || "1px",
-        borderRadius: borderRadius || "0px",
+        borderRadius: `${topLeft}px ${topRight}px ${bottomLeft}px ${bottomRight}px`,
         borderStyle: borderStyle || "solid",
         color: textColor || "#000",
         "&:hover": {

package/dist/Editor/Elements/InlineIcon/InlineIcon.js

@@ -0,0 +1,54 @@
+import React from "react";
+import * as fIcons from "@mui/icons-material";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const InlineIcon = props => {
+  const {
+    attributes,
+    children,
+    element
+  } = props;
+  const {
+    bgColor,
+    textColor,
+    bannerSpacing,
+    borderRadius,
+    borderColor,
+    icon
+  } = element;
+  const {
+    left,
+    top,
+    right,
+    bottom
+  } = bannerSpacing || {};
+  const {
+    topLeft,
+    topRight,
+    bottomLeft,
+    bottomRight
+  } = borderRadius || {};
+  const BtnIcon = fIcons["Check"];
+  console.log(icon);
+  return /*#__PURE__*/_jsxs("button", {
+    ...attributes,
+    className: "editor-icon-text",
+    contentEditable: false,
+    style: {
+      display: "inline",
+      paddingLeft: `${left}px`,
+      paddingRight: `${right}px`,
+      paddingTop: `${top}px`,
+      paddingBottom: `${bottom}px`,
+      border: borderColor ? `1px solid ${borderColor}` : "none",
+      borderRadius: `${topLeft}px ${topRight}px ${bottomLeft}px ${bottomRight}px`,
+      background: bgColor || "#CCC",
+      color: textColor
+    },
+    children: [/*#__PURE__*/_jsx(BtnIcon, {}), /*#__PURE__*/_jsx("div", {
+      contentEditable: true,
+      children: children
+    })]
+  });
+};
+export default InlineIcon;

package/dist/Editor/Elements/InlineIcon/InlineIconButton.js

@@ -0,0 +1,69 @@
+import React, { useState } from "react";
+import { Editor, Transforms } from "slate";
+import { IconButton } from "@mui/material";
+import SmartButtonIcon from "@mui/icons-material/SmartButton";
+import { removeChipText } from "../../utils/insertChipText";
+import { insertIconText } from "../../utils/insertIconText";
+import ChipTextPopup from "./InlineIconPopup";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const InlineIconButton = props => {
+  const {
+    editor,
+    customProps
+  } = props;
+  const [openSetttings, setOpenSettings] = useState(false);
+  const handleClick = () => {
+    const [parent, parentPath] = Editor.parent(editor, editor.selection.focus.path);
+    if (parent && parent?.type === "chip-text") {
+      setOpenSettings({
+        element: parent,
+        path: parentPath
+      });
+      // removeChipText(editor, parentPath);
+    } else {
+      insertIconText(editor, {
+        url: "",
+        showInNewTab: false
+      });
+    }
+  };
+  const onSave = data => {
+    const updateData = {
+      ...data
+    };
+    delete updateData.children;
+    Transforms.setNodes(editor, {
+      ...updateData
+    }, {
+      at: openSetttings?.path
+    });
+    onClose();
+  };
+  const onClose = () => {
+    setOpenSettings(false);
+  };
+  const onDelete = () => {
+    removeChipText(editor, openSetttings?.path);
+    onClose();
+  };
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(IconButton, {
+      title: "Icon",
+      onClick: handleClick,
+      children: /*#__PURE__*/_jsx(SmartButtonIcon, {
+        sx: {
+          fill: "#64748B"
+        }
+      })
+    }), openSetttings !== false ? /*#__PURE__*/_jsx(ChipTextPopup, {
+      element: openSetttings?.element || {},
+      onSave: onSave,
+      onClose: onClose,
+      onDelete: onDelete,
+      customProps: customProps
+    }) : null]
+  });
+};
+export default InlineIconButton;

package/dist/Editor/Elements/InlineIcon/InlineIconPopup.js

@@ -0,0 +1,24 @@
+import React from "react";
+import StyleBuilder from "../../common/StyleBuilder";
+import chipTextStyle from "../../common/StyleBuilder/chipTextStyle";
+import { jsx as _jsx } from "react/jsx-runtime";
+const InlineIconPopup = props => {
+  const {
+    element,
+    onSave,
+    onClose,
+    onDelete,
+    customProps
+  } = props;
+  return /*#__PURE__*/_jsx(StyleBuilder, {
+    title: "Chip Text",
+    type: "ChipTextPopup",
+    element: element,
+    onSave: onSave,
+    onClose: onClose,
+    onDelete: onDelete,
+    renderTabs: chipTextStyle,
+    customProps: customProps
+  });
+};
+export default InlineIconPopup;

package/dist/Editor/Elements/Link/Link.js

@@ -3,6 +3,9 @@ import { useFocused, useSelected, useSlateStatic } from "slate-react";
 import { removeLink } from "../../utils/link";
 import unlink from "../../Toolbar/toolbarIcons/unlink.svg";
 import "./styles.css";
+import { GrDocumentUpload } from 'react-icons/gr';
+import { insertEmbed } from "../../utils/embed";
+import { getQueryStrings } from "../../utils/SlateUtilityFunctions";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const Link = ({
@@ -13,6 +16,24 @@ const Link = ({
   const editor = useSlateStatic();
   const selected = useSelected();
   const focused = useFocused();
+  let refUrl = element.href ? element.href : element.url;
+  refUrl = refUrl ? refUrl.includes('http') ? refUrl : `//${refUrl}` : 'Link';
+  let embedUrl = refUrl;
+
+  // const urlMatch = embedUrl.match(regex);
+  // embedUrl = urlMatch && urlMatch.length > 0 ? urlMatch[0] : '';
+  if (embedUrl.includes('youtube')) embedUrl = getQueryStrings(embedUrl); //embedUrl.replace(/\/watch\?v=/g, '/embed/')
+  if (embedUrl.includes('youtu.be')) embedUrl = getQueryStrings(embedUrl); //embedUrl.replace(/youtu.be\//, 'youtube.com/embed/')
+  // Others
+  if (embedUrl.includes('loom')) embedUrl = embedUrl.replace(/\/share\//, '/embed/');
+  if (embedUrl.includes('vimeo')) embedUrl = embedUrl.replace(/\/vimeo.com\//, '/player.vimeo.com/video/');
+  if (embedUrl.includes('dailymotion') && embedUrl.includes('video')) embedUrl = embedUrl.replace(/www.dailymotion.com\//, 'www.dailymotion.com/embed/');
+  if (embedUrl.includes('dai.ly')) embedUrl = embedUrl.replace(/dai.ly\//, 'www.dailymotion.com/embed/video/');
+  const embedDoc = () => {
+    insertEmbed(editor, {
+      url: embedUrl
+    }, 'embed');
+  };
   return /*#__PURE__*/_jsxs("div", {
     className: "link",
     children: [/*#__PURE__*/_jsx("a", {
@@ -28,6 +49,9 @@ const Link = ({
         href: element.href,
         target: element.target,
         children: element.href
+      }), /*#__PURE__*/_jsx("button", {
+        onClick: () => embedDoc(editor),
+        children: /*#__PURE__*/_jsx(GrDocumentUpload, {})
       }), /*#__PURE__*/_jsx("button", {
         onClick: () => removeLink(editor),
         children: /*#__PURE__*/_jsx("img", {

package/dist/Editor/Elements/Signature/SignatureOptions/DrawSignature.js

@@ -14,8 +14,8 @@ const DrawSignature = props => {
   } = props;
   const [uploading, setUploading] = useState(false);
   const onSigned = async () => {
-    setUploading(true);
     const strImage = canvasRef.toDataURL();
+    setUploading(true);
     const result = await services("uploadFile", {
       image: strImage
     });

package/dist/Editor/Elements/Signature/SignaturePopup.js

@@ -33,7 +33,10 @@ const SignaturePopup = props => {
   const handleClose = () => {
     setOpen(false);
   };
-  const handleSave = () => {
+  const handleSave = async () => {
+    await customProps?.services("workFlowAction", {
+      resource_id: customProps?.page_id
+    });
     onSave(signedData);
     handleClose();
   };

package/dist/Editor/Toolbar/Toolbar.js

@@ -23,6 +23,7 @@ import AppHeaderButton from "../Elements/AppHeader/AppHeaderButton";
 import FormButton from "../Elements/Form/FormButton.js";
 import Text from "./FormatTools/Text";
 import ChipTextButton from "../Elements/ChipText/ChipTextButton";
+import InlineIconButton from "../Elements/InlineIcon/InlineIconButton";
 import "./styles.css";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -162,6 +163,11 @@ const Toolbar = props => {
               editor: editor,
               customProps: customProps
             }, element.id);
+          case "icon-text":
+            return /*#__PURE__*/_jsx(InlineIconButton, {
+              editor: editor,
+              customProps: customProps
+            }, element.id);
           default:
             return null;
         }

package/dist/Editor/Toolbar/toolbarGroups.js

@@ -154,5 +154,11 @@ const toolbarGroups = [[{
 }, {
   id: 38,
   type: "form"
-}]];
+}
+// {
+//   id: 39,
+//   type: "icon-text",
+// },
+]];
+
 export default toolbarGroups;

package/dist/Editor/common/ColorPickerButton.js

@@ -1,6 +1,7 @@
 import React, { useState } from "react";
 import { Grid, Button, Popover } from "@mui/material";
-import ColorPicker from "react-best-gradient-color-picker";
+// import ColorPicker from "react-best-gradient-color-picker";
+import ColorPickerTool from "react-gcolor-picker";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
@@ -35,6 +36,14 @@ const ColorPickerButton = props => {
     }), /*#__PURE__*/_jsx(Popover, {
       open: open,
       anchorEl: anchorEl,
+      anchorOrigin: {
+        vertical: "center",
+        horizontal: "center"
+      },
+      transformOrigin: {
+        vertical: "center",
+        horizontal: "center"
+      },
       onClose: handleClose,
       sx: {
         "& .MuiPaper-root": {
@@ -47,7 +56,8 @@ const ColorPickerButton = props => {
         children: /*#__PURE__*/_jsxs(Grid, {
           item: true,
           xs: 12,
-          children: [/*#__PURE__*/_jsx(ColorPicker, {
+          children: [/*#__PURE__*/_jsx(ColorPickerTool, {
+            gradient: true,
             value: color,
             onChange: setColor
           }), /*#__PURE__*/_jsxs("div", {

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

@@ -1,4 +1,28 @@
 const chipTextStyle = [{
+  tab: "Icon",
+  value: "icon",
+  fields: [{
+    label: "Font Size",
+    key: "textSize",
+    type: "text",
+    placeholder: "16px or 1em"
+  }, {
+    label: "Icon Position",
+    key: "iconPosition",
+    type: "textOptions",
+    options: [{
+      value: "start",
+      label: "Start"
+    }, {
+      value: "end",
+      label: "End"
+    }]
+  }, {
+    label: "Button Icons",
+    key: "buttonIcon",
+    type: "icons"
+  }]
+}, {
   tab: "Banner Spacing",
   value: "bannerSpacing",
   fields: [{

package/dist/Editor/hooks/withCommon.js

@@ -6,6 +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';
+
 const withCommon = (props, rest = {}) => {
   return rest.needLayout ? withEquation(withLayout(withHistory(withEmbeds(withTables(withLinks(withMentions(withReact(props)))))))) : withEquation(withHistory(withEmbeds(withTables(withLinks(withMentions(withReact(props)))))));
 };

package/dist/Editor/plugins/withLinks.js

@@ -1,5 +1,5 @@
 import { Transforms, Element, Node } from "slate";
-const INLINE_ELLEMENTS = ["link", "chip-text", "drawer"];
+const INLINE_ELLEMENTS = ["link", "chip-text", "drawer", "icon-text"];
 const withLinks = editor => {
   const {
     isInline,

package/dist/Editor/utils/SlateUtilityFunctions.js

@@ -28,6 +28,8 @@ import PageSettings from "../Elements/PageSettings/PageSettings";
 import Title from "../Elements/Title/title";
 import Form from "../Elements/Form/Form";
 import FormField from "../Elements/Form/FormField";
+import InlineIcon from "../Elements/InlineIcon/InlineIcon";
+import EmbedLink from "../Elements/Embed/link";
 import { jsx as _jsx } from "react/jsx-runtime";
 const alignment = ["alignLeft", "alignRight", "alignCenter"];
 const list_types = ["orderedList", "unorderedList"];
@@ -379,6 +381,14 @@ export const getBlock = props => {
       return /*#__PURE__*/_jsx(FormField, {
         ...props
       });
+    case "icon-text":
+      return /*#__PURE__*/_jsx(InlineIcon, {
+        ...props
+      });
+    case "embed":
+      return /*#__PURE__*/_jsx(EmbedLink, {
+        ...props
+      });
     default:
       return /*#__PURE__*/_jsx("div", {
         ...element.attr,
@@ -386,4 +396,12 @@ export const getBlock = props => {
         children: children
       });
   }
+};
+export const getQueryStrings = urlString => {
+  const newUrl = new URL(urlString);
+  var youCode = newUrl.searchParams.get("v");
+  if (!youCode) {
+    youCode = newUrl.pathname.replace("/", "");
+  }
+  return `https://www.youtube.com/embed/${youCode}`;
 };

package/dist/Editor/utils/embed.js

@@ -1,4 +1,4 @@
-import { Transforms } from "slate";
+import { Editor, Transforms } from "slate";
 import { createParagraph } from "./paragraph";
 export const createEmbedNode = (type, {
   url,
@@ -16,9 +16,29 @@ export const insertEmbed = (editor, embedData, format) => {
     url
   } = embedData;
   if (!url) return;
+  const {
+    selection
+  } = editor;
+  if (!selection?.focus?.path) return;
+  const [parent, parentPath] = Editor.parent(editor, selection?.focus?.path);
   const embed = createEmbedNode(format, embedData);
+  let removePath = parentPath;
+  let parentPosition = parentPath;
+  if (parentPath?.length - 1 > 0) {
+    removePath = parentPath.slice(0, parentPath?.length - 1);
+    parentPosition = parentPath.slice(0, parentPath?.length - 1);
+  }
+  removePath = removePath.map((elem, i) => {
+    if (i === removePath.length - 1) {
+      return elem + 1;
+    }
+    return elem;
+  });
   Transforms.insertNodes(editor, embed, {
-    select: true
+    at: parentPosition
+  });
+  Transforms.unwrapNodes(editor, {
+    at: [...removePath]
   });
   Transforms.insertNodes(editor, createParagraph(""));
 };

package/dist/Editor/utils/insertChipText.js

@@ -14,7 +14,7 @@ export const insertChipText = (editor, {
   const {
     selection
   } = editor;
-  const chipText = createChipTextNode(url, showInNewTab, "Chip Text");
+  const chipText = createChipTextNode(url, showInNewTab, " ");
   if (!!selection) {
     const [parent, parentPath] = Editor.parent(editor, selection.focus.path);
     if (editor.isVoid(parent)) {

package/dist/Editor/utils/insertIconText.js

@@ -0,0 +1,50 @@
+import { Editor, Transforms, Path, Range, Element } from "slate";
+export const createIconTextNode = (href, showInNewTab, text) => ({
+  type: "icon-text",
+  href,
+  icon: "Check",
+  target: showInNewTab ? "_blank" : "_self",
+  children: [{
+    text
+  }]
+});
+export const insertIconText = (editor, {
+  url,
+  showInNewTab
+}) => {
+  const {
+    selection
+  } = editor;
+  const chipText = createIconTextNode(url, showInNewTab, "");
+  if (!!selection) {
+    const [parent, parentPath] = Editor.parent(editor, selection.focus.path);
+    if (editor.isVoid(parent)) {
+      Transforms.insertNodes(editor, {
+        type: "paragraph",
+        children: [chipText]
+      }, {
+        at: Path.next(parentPath),
+        select: true
+      });
+    } else if (Range.isCollapsed(selection)) {
+      Transforms.insertNodes(editor, chipText, {
+        select: true
+      });
+    } else {
+      Transforms.wrapNodes(editor, chipText, {
+        split: true
+      });
+    }
+  } else {
+    Transforms.insertNodes(editor, {
+      type: "paragraph",
+      children: [chipText]
+    });
+  }
+};
+export const removeIconText = (editor, path) => {
+  Transforms.unwrapNodes(editor, {
+    at: path,
+    match: n => !Editor.isEditor(n) && Element.isElement(n) && n.type === "icon-text"
+  });
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flozy/editor",
-  "version": "1.4.4",
+  "version": "1.4.6",
   "description": "An Editor for flozy app brain",
   "files": [
     "dist"
@@ -27,6 +27,7 @@
     "prettier": "^3.0.1",
     "react-best-gradient-color-picker": "^2.2.23",
     "react-datepicker": "^4.18.0",
+    "react-gcolor-picker": "^1.3.1",
     "react-icons": "^4.10.1",
     "react-katex": "^3.0.1",
     "react-scripts": "5.0.1",