@flozy/editor 1.4.5 → 1.4.7

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/Elements/Button/EditorButton.js

@@ -32,7 +32,6 @@ const EditorButton = props => {
     bannerSpacing,
     textColor,
     url,
-    borderColor,
     buttonLink,
     textSize,
     textAlign,
@@ -40,7 +39,10 @@ const EditorButton = props => {
     textColorHover,
     bgColorHover,
     buttonIcon,
-    iconPosition
+    iconPosition,
+    borderStyle,
+    borderWidth,
+    borderColor
   } = element;
   const {
     linkType,
@@ -119,7 +121,7 @@ const EditorButton = props => {
   const onClose = () => {
     setEdit(false);
   };
-  const borderStyle = borderColor?.indexOf("linear") >= 0 ? {
+  const borderStyleColor = borderColor?.indexOf("linear") >= 0 ? {
     borderImageSource: borderColor,
     borderImageSlice: 1
   } : {
@@ -142,10 +144,12 @@ const EditorButton = props => {
         component: "button",
         sx: {
           background: bgColor || "rgb(30, 75, 122)",
-          borderWidth: "1px",
           borderBlockStyle: "solid",
-          ...borderStyle,
+          // ...borderStyleColor,
+          borderColor: borderColor || "transparent",
+          borderWidth: borderWidth || "1px",
           borderRadius: `${topLeft}px ${topRight}px ${bottomLeft}px ${bottomRight}px`,
+          borderStyle: borderStyle || "solid",
           paddingLeft: `${left || 8}px`,
           paddingRight: `${right || 8}px`,
           paddingTop: `${top || 8}px`,

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;