@flozy/editor 1.0.8 → 1.1.0

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

@@ -1,9 +1,10 @@
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 import React, { useEffect, useState } from "react";
 import { useSlateStatic, useSelected, useFocused, ReactEditor } from "slate-react";
 import { Node, Transforms } from "slate";
 import Icon from "../../common/Icon";
 import useResize from "../../utils/customHooks/useResize";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 const Image = ({
   attributes,
   element,
@@ -37,34 +38,39 @@ const Image = ({
       });
     }
   }, [resizing]);
-  return /*#__PURE__*/React.createElement("div", _extends({}, attributes, {
+  return /*#__PURE__*/_jsxs("div", {
+    ...attributes,
     className: "embed",
     style: {
       display: "flex",
       width: "100%",
       maxWidth: "100%",
       boxShadow: selected && focused && "0 0 3px 3px lightgray"
-    }
-  }, element.attr), /*#__PURE__*/React.createElement("div", {
-    contentEditable: false,
-    style: {
-      position: "relative",
-      width: size.widthInPercent ? `${size.widthInPercent}%` : `${size.width}px`,
-      height: `${size.height}px`
-    }
-  }, /*#__PURE__*/React.createElement("img", {
-    alt: alt,
-    src: url
-  }), selected && /*#__PURE__*/React.createElement("button", {
-    onPointerDown: onMouseDown,
-    style: {
-      width: "15px",
-      height: "15px",
-      opacity: 1,
-      background: "transparent"
-    }
-  }, /*#__PURE__*/React.createElement(Icon, {
-    icon: "resize"
-  }))), children);
+    },
+    ...element.attr,
+    children: [/*#__PURE__*/_jsxs("div", {
+      contentEditable: false,
+      style: {
+        position: "relative",
+        width: size.widthInPercent ? `${size.widthInPercent}%` : `${size.width}px`,
+        height: `${size.height}px`
+      },
+      children: [/*#__PURE__*/_jsx("img", {
+        alt: alt,
+        src: url
+      }), selected && /*#__PURE__*/_jsx("button", {
+        onPointerDown: onMouseDown,
+        style: {
+          width: "15px",
+          height: "15px",
+          opacity: 1,
+          background: "transparent"
+        },
+        children: /*#__PURE__*/_jsx(Icon, {
+          icon: "resize"
+        })
+      })]
+    }), children]
+  });
 };
 export default Image;

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

@@ -1,8 +1,9 @@
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 import React from "react";
 import { useSelected, useFocused } from "slate-react";
 import Icon from "../../common/Icon";
 import useResize from "../../utils/customHooks/useResize";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 const Video = ({
   attributes,
   element,
@@ -15,46 +16,52 @@ const Video = ({
   const [size, onMouseDown, resizing] = useResize();
   const selected = useSelected();
   const focused = useFocused();
-  return /*#__PURE__*/React.createElement("div", _extends({}, attributes, {
+  return /*#__PURE__*/_jsxs("div", {
+    ...attributes,
     className: "embed",
     style: {
       display: "flex",
       boxShadow: selected && focused && "0 0 3px 3px lightgray"
-    }
-  }, element.attr), /*#__PURE__*/React.createElement("div", {
-    contentEditable: false,
-    style: {
-      width: `${size.width}px`,
-      height: `${size.height}px`
-    }
-  },
-  // The iframe reloads on each re-render and hence it stutters and the document doesn't detect mouse-up event leading to unwanted behaviour
-  // So during resize replace the iframe with a simple div
-  resizing ? /*#__PURE__*/React.createElement("div", {
-    style: {
-      width: "100%",
-      height: "100%",
-      border: "2px dashed black",
-      display: "flex",
-      justifyContent: "center",
-      alignItems: "center"
-    }
-  }, /*#__PURE__*/React.createElement(Icon, {
-    icon: "videoPlayer"
-  })) : /*#__PURE__*/React.createElement("iframe", {
-    src: url,
-    frameBorder: "0",
-    title: alt
-  }), selected && /*#__PURE__*/React.createElement("button", {
-    onMouseDown: onMouseDown,
-    style: {
-      width: "15px",
-      height: "15px",
-      opacity: 1,
-      background: "transparent"
-    }
-  }, /*#__PURE__*/React.createElement(Icon, {
-    icon: "resize"
-  }))), children);
+    },
+    ...element.attr,
+    children: [/*#__PURE__*/_jsxs("div", {
+      contentEditable: false,
+      style: {
+        width: `${size.width}px`,
+        height: `${size.height}px`
+      },
+      children: [
+      // The iframe reloads on each re-render and hence it stutters and the document doesn't detect mouse-up event leading to unwanted behaviour
+      // So during resize replace the iframe with a simple div
+      resizing ? /*#__PURE__*/_jsx("div", {
+        style: {
+          width: "100%",
+          height: "100%",
+          border: "2px dashed black",
+          display: "flex",
+          justifyContent: "center",
+          alignItems: "center"
+        },
+        children: /*#__PURE__*/_jsx(Icon, {
+          icon: "videoPlayer"
+        })
+      }) : /*#__PURE__*/_jsx("iframe", {
+        src: url,
+        frameBorder: "0",
+        title: alt
+      }), selected && /*#__PURE__*/_jsx("button", {
+        onMouseDown: onMouseDown,
+        style: {
+          width: "15px",
+          height: "15px",
+          opacity: 1,
+          background: "transparent"
+        },
+        children: /*#__PURE__*/_jsx(Icon, {
+          icon: "resize"
+        })
+      })]
+    }), children]
+  });
 };
 export default Video;

package/dist/Editor/Elements/Equation/Equation.js

@@ -1,7 +1,8 @@
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 import React from "react";
 import { InlineMath, BlockMath } from "react-katex";
 import "./styles.css";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 const Equation = ({
   attributes,
   element,
@@ -11,14 +12,20 @@ const Equation = ({
     inline,
     math
   } = element;
-  return /*#__PURE__*/React.createElement("div", {
-    className: inline ? "equation-inline" : ""
-  }, /*#__PURE__*/React.createElement("span", _extends({}, attributes, element.attr), /*#__PURE__*/React.createElement("span", {
-    contentEditable: false
-  }, inline ? /*#__PURE__*/React.createElement(InlineMath, {
-    math: math
-  }) : /*#__PURE__*/React.createElement(BlockMath, {
-    math: math
-  })), children));
+  return /*#__PURE__*/_jsx("div", {
+    className: inline ? "equation-inline" : "",
+    children: /*#__PURE__*/_jsxs("span", {
+      ...attributes,
+      ...element.attr,
+      children: [/*#__PURE__*/_jsx("span", {
+        contentEditable: false,
+        children: inline ? /*#__PURE__*/_jsx(InlineMath, {
+          math: math
+        }) : /*#__PURE__*/_jsx(BlockMath, {
+          math: math
+        })
+      }), children]
+    })
+  });
 };
 export default Equation;

package/dist/Editor/Elements/Equation/EquationButton.js

@@ -4,6 +4,8 @@ import Icon from '../../common/Icon';
 import usePopup from '../../utils/customHooks/usePopup';
 import { insertEquation } from '../../utils/equation';
 import { Transforms } from 'slate';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 const EquationButton = ({
   editor
 }) => {
@@ -33,34 +35,41 @@ const EquationButton = ({
     console.log('btn click');
     setShowInput(false);
   };
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/_jsxs("div", {
     ref: equationInputRef,
-    className: "popup-wrapper"
-  }, /*#__PURE__*/React.createElement(Button, {
-    format: "equation",
-    onClick: toggleButton
-  }, /*#__PURE__*/React.createElement(Icon, {
-    icon: "equation"
-  })), showInput && /*#__PURE__*/React.createElement("div", {
-    className: "popup"
-  }, /*#__PURE__*/React.createElement("div", {
-    style: {
-      display: 'flex',
-      gap: '5px'
-    }
-  }, /*#__PURE__*/React.createElement("input", {
-    type: "text",
-    value: math,
-    onChange: handleInputChange,
-    placeholder: "Enter formula"
-  }), /*#__PURE__*/React.createElement("div", {
-    onClick: handleAddEquation
-  }, /*#__PURE__*/React.createElement(Icon, {
-    icon: "add"
-  }))), /*#__PURE__*/React.createElement("label", null, /*#__PURE__*/React.createElement("input", {
-    type: "checkbox",
-    checked: displayInline,
-    onChange: handleInputChange
-  }), "Inline Equation")));
+    className: "popup-wrapper",
+    children: [/*#__PURE__*/_jsx(Button, {
+      format: "equation",
+      onClick: toggleButton,
+      children: /*#__PURE__*/_jsx(Icon, {
+        icon: "equation"
+      })
+    }), showInput && /*#__PURE__*/_jsxs("div", {
+      className: "popup",
+      children: [/*#__PURE__*/_jsxs("div", {
+        style: {
+          display: 'flex',
+          gap: '5px'
+        },
+        children: [/*#__PURE__*/_jsx("input", {
+          type: "text",
+          value: math,
+          onChange: handleInputChange,
+          placeholder: "Enter formula"
+        }), /*#__PURE__*/_jsx("div", {
+          onClick: handleAddEquation,
+          children: /*#__PURE__*/_jsx(Icon, {
+            icon: "add"
+          })
+        })]
+      }), /*#__PURE__*/_jsxs("label", {
+        children: [/*#__PURE__*/_jsx("input", {
+          type: "checkbox",
+          checked: displayInline,
+          onChange: handleInputChange
+        }), "Inline Equation"]
+      })]
+    })]
+  });
 };
 export default EquationButton;

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

@@ -1,8 +1,9 @@
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 import React from "react";
 import { Transforms, Path } from "slate";
 import { useSelected, useSlateStatic } from "slate-react";
 import { gridItem } from "../../utils/gridItem";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 const Grid = props => {
   const {
     attributes,
@@ -39,15 +40,19 @@ const Grid = props => {
     }
   };
   const GridToolBar = () => {
-    return selected ? /*#__PURE__*/React.createElement("div", {
+    return selected ? /*#__PURE__*/_jsx("div", {
       className: "grid-container-toolbar",
-      contentEditable: false
-    }, /*#__PURE__*/React.createElement("button", {
-      onClick: onAddGridItem
-    }, "+ Add Item")) : null;
+      contentEditable: false,
+      children: /*#__PURE__*/_jsx("button", {
+        onClick: onAddGridItem,
+        children: "+ Add Item"
+      })
+    }) : null;
   };
-  return /*#__PURE__*/React.createElement("div", _extends({
-    className: `grid-container ${grid}`
-  }, attributes), /*#__PURE__*/React.createElement(GridToolBar, null), children);
+  return /*#__PURE__*/_jsxs("div", {
+    className: `grid-container ${grid}`,
+    ...attributes,
+    children: [/*#__PURE__*/_jsx(GridToolBar, {}), children]
+  });
 };
 export default Grid;

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

@@ -1,6 +1,7 @@
 import React from "react";
 import ViewComfyIcon from "@mui/icons-material/ViewComfy";
 import { insertGrid } from "../../utils/grid";
+import { jsx as _jsx } from "react/jsx-runtime";
 const GridButton = props => {
   const {
     editor
@@ -8,12 +9,13 @@ const GridButton = props => {
   const handleInsertGrid = () => {
     insertGrid(editor);
   };
-  return /*#__PURE__*/React.createElement("button", {
+  return /*#__PURE__*/_jsx("button", {
     onClick: handleInsertGrid,
     title: "Layout",
     style: {
       marginLeft: "8px"
-    }
-  }, /*#__PURE__*/React.createElement(ViewComfyIcon, null));
+    },
+    children: /*#__PURE__*/_jsx(ViewComfyIcon, {})
+  });
 };
 export default GridButton;

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

@@ -1,7 +1,8 @@
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 import React from "react";
 import { Transforms, Element } from "slate";
 import { useSelected, useSlateStatic } from "slate-react";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 const GridItem = props => {
   const {
     attributes,
@@ -33,21 +34,25 @@ const GridItem = props => {
     });
   };
   const GridItemToolbar = () => {
-    return selected ? /*#__PURE__*/React.createElement("div", {
+    return selected ? /*#__PURE__*/_jsxs("div", {
       contentEditable: false,
-      className: "grid-item-toolbar"
-    }, /*#__PURE__*/React.createElement("button", {
-      onClick: onItemSizeDecrease
-    }, "-"), /*#__PURE__*/React.createElement("button", {
-      onClick: onItemSizeIncrease
-    }, "+")) : null;
+      className: "grid-item-toolbar",
+      children: [/*#__PURE__*/_jsx("button", {
+        onClick: onItemSizeDecrease,
+        children: "-"
+      }), /*#__PURE__*/_jsx("button", {
+        onClick: onItemSizeIncrease,
+        children: "+"
+      })]
+    }) : null;
   };
-  return /*#__PURE__*/React.createElement("div", _extends({
-    className: `grid-item xs-${grid}`
-  }, attributes, {
+  return /*#__PURE__*/_jsxs("div", {
+    className: `grid-item xs-${grid}`,
+    ...attributes,
     style: {
       width: `${itemWidth}%`
-    }
-  }), children, /*#__PURE__*/React.createElement(GridItemToolbar, null));
+    },
+    children: [children, /*#__PURE__*/_jsx(GridItemToolbar, {})]
+  });
 };
 export default GridItem;

package/dist/Editor/Elements/ID/Id.js

@@ -3,6 +3,8 @@ import React, { useRef, useState } from "react";
 import Button from "../../common/Button";
 import Icon from "../../common/Icon";
 import usePopup from "../../utils/customHooks/usePopup";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 const Id = ({
   editor
 }) => {
@@ -27,30 +29,34 @@ const Id = ({
     setShowInput(false);
     setId("");
   };
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/_jsxs("div", {
     className: "popup-wrapper",
-    ref: idInputRef
-  }, /*#__PURE__*/React.createElement(Button, {
-    className: showInput ? "clicked" : "",
-    format: "add Id",
-    onClick: toggleId
-  }, /*#__PURE__*/React.createElement(Icon, {
-    icon: "addId"
-  })), showInput && /*#__PURE__*/React.createElement("div", {
-    className: "popup",
-    style: {
-      display: "flex",
-      gap: "4px"
-    }
-  }, /*#__PURE__*/React.createElement("input", {
-    type: "text",
-    placeholder: "Enter an unique ID",
-    value: id,
-    onChange: e => setId(e.target.value)
-  }), /*#__PURE__*/React.createElement("div", {
-    onClick: handleId
-  }, /*#__PURE__*/React.createElement(Icon, {
-    icon: "add"
-  }))));
+    ref: idInputRef,
+    children: [/*#__PURE__*/_jsx(Button, {
+      className: showInput ? "clicked" : "",
+      format: "add Id",
+      onClick: toggleId,
+      children: /*#__PURE__*/_jsx(Icon, {
+        icon: "addId"
+      })
+    }), showInput && /*#__PURE__*/_jsxs("div", {
+      className: "popup",
+      style: {
+        display: "flex",
+        gap: "4px"
+      },
+      children: [/*#__PURE__*/_jsx("input", {
+        type: "text",
+        placeholder: "Enter an unique ID",
+        value: id,
+        onChange: e => setId(e.target.value)
+      }), /*#__PURE__*/_jsx("div", {
+        onClick: handleId,
+        children: /*#__PURE__*/_jsx(Icon, {
+          icon: "add"
+        })
+      })]
+    })]
+  });
 };
 export default Id;

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

@@ -1,9 +1,10 @@
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 import React from 'react';
 import { useFocused, useSelected, useSlateStatic } from 'slate-react';
 import { removeLink } from '../../utils/link';
 import unlink from '../../Toolbar/toolbarIcons/unlink.svg';
 import './styles.css';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 const Link = ({
   attributes,
   element,
@@ -12,23 +13,29 @@ const Link = ({
   const editor = useSlateStatic();
   const selected = useSelected();
   const focused = useFocused();
-  return /*#__PURE__*/React.createElement("div", {
-    className: "link"
-  }, /*#__PURE__*/React.createElement("a", _extends({
-    href: element.href
-  }, attributes, element.attr, {
-    target: element.target
-  }), children), selected && focused && /*#__PURE__*/React.createElement("div", {
-    className: "link-popup",
-    contentEditable: false
-  }, /*#__PURE__*/React.createElement("a", {
-    href: element.href,
-    target: element.target
-  }, element.href), /*#__PURE__*/React.createElement("button", {
-    onClick: () => removeLink(editor)
-  }, /*#__PURE__*/React.createElement("img", {
-    src: unlink,
-    alt: ""
-  }))));
+  return /*#__PURE__*/_jsxs("div", {
+    className: "link",
+    children: [/*#__PURE__*/_jsx("a", {
+      href: element.href,
+      ...attributes,
+      ...element.attr,
+      target: element.target,
+      children: children
+    }), selected && focused && /*#__PURE__*/_jsxs("div", {
+      className: "link-popup",
+      contentEditable: false,
+      children: [/*#__PURE__*/_jsx("a", {
+        href: element.href,
+        target: element.target,
+        children: element.href
+      }), /*#__PURE__*/_jsx("button", {
+        onClick: () => removeLink(editor),
+        children: /*#__PURE__*/_jsx("img", {
+          src: unlink,
+          alt: ""
+        })
+      })]
+    })]
+  });
 };
 export default Link;

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

@@ -5,6 +5,8 @@ import Icon from "../../common/Icon";
 import { isBlockActive } from "../../utils/SlateUtilityFunctions";
 import usePopup from "../../utils/customHooks/usePopup";
 import { Transforms } from "slate";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 const LinkButton = props => {
   const {
     editor
@@ -37,41 +39,49 @@ const LinkButton = props => {
       setUrl(target.value);
     }
   };
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/_jsxs("div", {
     ref: linkInputRef,
-    className: "popup-wrapper"
-  }, /*#__PURE__*/React.createElement(Button, {
-    className: showInput ? "clicked" : "",
-    active: isBlockActive(editor, "link"),
-    format: "link",
-    onClick: toggleLink
-  }, /*#__PURE__*/React.createElement(Icon, {
-    icon: "link"
-  })), showInput && /*#__PURE__*/React.createElement("div", {
-    className: "popup"
-  }, /*#__PURE__*/React.createElement("div", {
-    style: {
-      display: "flex",
-      gap: "4px",
-      margin: "5px 2px"
-    }
-  }, /*#__PURE__*/React.createElement("input", {
-    type: "text",
-    placeholder: "https://google.com",
-    value: url,
-    onChange: handleInputChange
-  }), /*#__PURE__*/React.createElement("div", {
-    onClick: handleInsertLink
-  }, /*#__PURE__*/React.createElement(Icon, {
-    icon: "add"
-  }))), /*#__PURE__*/React.createElement("label", null, /*#__PURE__*/React.createElement("input", {
-    type: "checkbox",
-    checked: showInNewTab,
-    onChange: handleInputChange
-  }), /*#__PURE__*/React.createElement("span", {
-    style: {
-      fontSize: "0.8em"
-    }
-  }, "Open in new tab"))));
+    className: "popup-wrapper",
+    children: [/*#__PURE__*/_jsx(Button, {
+      className: showInput ? "clicked" : "",
+      active: isBlockActive(editor, "link"),
+      format: "link",
+      onClick: toggleLink,
+      children: /*#__PURE__*/_jsx(Icon, {
+        icon: "link"
+      })
+    }), showInput && /*#__PURE__*/_jsxs("div", {
+      className: "popup",
+      children: [/*#__PURE__*/_jsxs("div", {
+        style: {
+          display: "flex",
+          gap: "4px",
+          margin: "5px 2px"
+        },
+        children: [/*#__PURE__*/_jsx("input", {
+          type: "text",
+          placeholder: "https://google.com",
+          value: url,
+          onChange: handleInputChange
+        }), /*#__PURE__*/_jsx("div", {
+          onClick: handleInsertLink,
+          children: /*#__PURE__*/_jsx(Icon, {
+            icon: "add"
+          })
+        })]
+      }), /*#__PURE__*/_jsxs("label", {
+        children: [/*#__PURE__*/_jsx("input", {
+          type: "checkbox",
+          checked: showInNewTab,
+          onChange: handleInputChange
+        }), /*#__PURE__*/_jsx("span", {
+          style: {
+            fontSize: "0.8em"
+          },
+          children: "Open in new tab"
+        })]
+      })]
+    })]
+  });
 };
 export default LinkButton;