@flozy/editor 3.5.1 → 3.5.2

package/dist/Editor/Editor.css

@@ -574,6 +574,16 @@ blockquote {
   margin: auto;
 }
 
+.embed-code .element-toolbar {
+  left: 0;
+  right: 0;
+  bottom: 0;
+  top: 0;
+  width: fit-content;
+  height: fit-content;
+  margin: auto;
+}
+
 .resize-br {
   position: absolute !important;
   bottom: 2px;

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

@@ -18,6 +18,11 @@
   right: 2px;
 }
 
+.embed-code {
+  position: relative;
+  margin: 0px;
+}
+
 .image-text-wrapper {
   padding: 0px;
   margin: 0px;

package/dist/Editor/Elements/EmbedScript/Code.js

@@ -1,6 +1,10 @@
 import React, { useEffect, useRef } from "react";
 import sanitizeHtml from "sanitize-html";
 import { allowedDomains, decodeString } from "../../utils/helper";
+import { IconButton, Tooltip } from "@mui/material";
+import { DeleteIcon } from "../../assets/svg/AIIcons";
+import { ReactEditor, useSlateStatic } from "slate-react";
+import { Transforms } from "slate";
 
 // const sanitize = (input) => {
 //   const doc = new DOMParser().parseFromString(input, "text/html");
@@ -21,18 +25,45 @@ const getCode = (embedData, isEncoded) => {
   }
   return embedData;
 };
+const ToolBar = ({
+  onDelete
+}) => {
+  return /*#__PURE__*/_jsx("div", {
+    className: "element-toolbar visible-on-hover",
+    contentEditable: false,
+    children: /*#__PURE__*/_jsx(Tooltip, {
+      title: "Delete",
+      arrow: true,
+      children: /*#__PURE__*/_jsx(IconButton, {
+        onClick: onDelete,
+        children: /*#__PURE__*/_jsx(DeleteIcon, {})
+      })
+    })
+  });
+};
 const Code = props => {
   const codeRef = useRef();
   const {
     element,
     attributes,
-    children
+    children,
+    customProps
   } = props;
   const {
     embedData,
     isEncoded,
     isSanitized
   } = element;
+  const {
+    readOnly
+  } = customProps;
+  const editor = useSlateStatic();
+  const path = ReactEditor.findPath(editor, element);
+  const onDelete = () => {
+    Transforms.removeNodes(editor, {
+      at: path
+    });
+  };
   useEffect(() => {
     if (codeRef?.current) {
       const code = getCode(embedData, isEncoded);
@@ -50,12 +81,14 @@ const Code = props => {
     }
   }, []);
   return /*#__PURE__*/_jsxs("div", {
+    className: "embed-code has-hover",
     contentEditable: false,
-    className: `embed-code`,
     ...attributes,
     children: [/*#__PURE__*/_jsx("div", {
       ref: codeRef
-    }), children]
+    }), children, !readOnly && /*#__PURE__*/_jsx(ToolBar, {
+      onDelete: onDelete
+    })]
   });
 };
 export default Code;

package/package.json

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