@flozy/editor 1.0.6 → 1.0.8

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

@@ -0,0 +1,116 @@
+import React, { useRef, useState } from "react";
+import { MdFormatColorText, MdFormatColorFill, MdCheck } from "react-icons/md";
+import "./ColorPicker.css";
+import { colors } from "./defaultColors";
+import { addMarkData, activeMark } from "../../utils/SlateUtilityFunctions";
+import { Transforms } from "slate";
+import usePopup from "../../utils/customHooks/usePopup";
+import { ReactEditor } from "slate-react";
+const logo = {
+  color: /*#__PURE__*/React.createElement(MdFormatColorText, {
+    size: 20
+  }),
+  bgColor: /*#__PURE__*/React.createElement(MdFormatColorFill, {
+    size: 20
+  })
+};
+const ColorPicker = ({
+  format,
+  editor
+}) => {
+  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 = () => {
+    setSelection(editor.selection);
+    selection && ReactEditor.focus(editor);
+    setShowOptions(prev => !prev);
+  };
+  const handleFormSubmit = e => {
+    e.preventDefault();
+    if (!validHex) return;
+    selection && Transforms.select(editor, selection);
+    addMarkData(editor, {
+      format,
+      value: hexValue
+    });
+    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);
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    className: "color-picker popup-wrapper",
+    ref: colorPickerRef
+  }, /*#__PURE__*/React.createElement("button", {
+    style: {
+      color: showOptions ? "black" : activeMark(editor, format),
+      opacity: "1"
+    },
+    className: showOptions ? "clicked" : "",
+    onClick: toggleOption
+  }, logo[format]), showOptions && /*#__PURE__*/React.createElement("div", {
+    className: "popup"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "color-options"
+  }, colors.map((color, index) => {
+    return /*#__PURE__*/React.createElement("div", {
+      key: index,
+      "data-value": color,
+      onClick: changeColor,
+      className: "option",
+      style: {
+        background: color
+      }
+    });
+  })), /*#__PURE__*/React.createElement("p", {
+    style: {
+      textAlign: "center",
+      opacity: "0.7",
+      width: "100%"
+    }
+  }, "OR"), /*#__PURE__*/React.createElement("form", {
+    onSubmit: handleFormSubmit
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "hexPreview",
+    style: {
+      background: validHex ? hexValue : "#000000"
+    }
+  }), /*#__PURE__*/React.createElement("input", {
+    type: "text",
+    placeholder: "#000000",
+    value: hexValue,
+    onChange: handleHexChange,
+    style: {
+      border: validHex === false ? "1px solid red" : "1px solid lightgray"
+    }
+  }), /*#__PURE__*/React.createElement("button", {
+    style: {
+      color: validHex ? "green" : ""
+    },
+    type: "submit"
+  }, /*#__PURE__*/React.createElement(MdCheck, {
+    size: 20
+  })))));
+};
+export default ColorPicker;

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

@@ -0,0 +1 @@
+export const colors = ["#000000", "#e60000", "#ff9900", "#ffff00", "#008a00", "#0066cc", "#9933ff", "#ffffff", "#facccc", "#ffebcc", "#ffffcc", "#cce8cc", "#cce0f5", "#ebd6ff", "#bbbbbb", "#f06666", "#ffc266", "#ffff66", "#66b966", "#66a3e0", "#c285ff", "#888888", "#a10000", "#b26b00", "#b2b200", "#006100", "#0047b2", "#6b24b2", "#444444", "#5c0000", "#663d00", "#666600", "#003700", "#002966", "#3d1466"];

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

@@ -0,0 +1,14 @@
+.embed{
+    width: fit-content;
+    position: relative;
+    margin-right: 20px;
+}
+.embed img,.embed iframe{
+    width: 100%;
+    height:100%;
+}
+.embed button{
+    position: absolute;
+    bottom: -6px;
+    right: 0;
+}

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

@@ -0,0 +1,94 @@
+import React, { useRef, useState } from 'react';
+import Button from '../../common/Button';
+import Icon from '../../common/Icon';
+import { isBlockActive } from '../../utils/SlateUtilityFunctions';
+import usePopup from '../../utils/customHooks/usePopup';
+import { insertEmbed } from '../../utils/embed';
+import { Transforms } from 'slate';
+import { ReactEditor } from 'slate-react';
+import './Embed.css';
+const Embed = ({
+  editor,
+  format
+}) => {
+  const urlInputRef = useRef();
+  const [showInput, setShowInput] = usePopup(urlInputRef);
+  const [formData, setFormData] = useState({
+    url: '',
+    alt: ''
+  });
+  const [selection, setSelection] = useState();
+  const handleButtonClick = e => {
+    e.preventDefault();
+    setSelection(editor.selection);
+    selection && ReactEditor.focus(editor);
+    setShowInput(prev => !prev);
+  };
+  const handleFormSubmit = e => {
+    e.preventDefault();
+    selection && Transforms.select(editor, selection);
+    selection && ReactEditor.focus(editor);
+    insertEmbed(editor, {
+      ...formData
+    }, format);
+    setShowInput(false);
+    setFormData({
+      url: '',
+      alt: ''
+    });
+  };
+  const handleImageUpload = () => {
+    setShowInput(false);
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    ref: urlInputRef,
+    className: "popup-wrapper"
+  }, /*#__PURE__*/React.createElement(Button, {
+    active: isBlockActive(editor, format),
+    style: {
+      border: showInput ? '1px solid lightgray' : '',
+      borderBottom: 'none'
+    },
+    format: format,
+    onClick: handleButtonClick
+  }, /*#__PURE__*/React.createElement(Icon, {
+    icon: format
+  })), showInput && /*#__PURE__*/React.createElement("div", {
+    className: "popup"
+  }, format === 'image' && /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: 'flex',
+      gap: '10px'
+    },
+    onClick: handleImageUpload
+  }, /*#__PURE__*/React.createElement(Icon, {
+    icon: "upload"
+  }), /*#__PURE__*/React.createElement("span", null, "Upload")), /*#__PURE__*/React.createElement("p", {
+    style: {
+      textAlign: 'center',
+      opacity: '0.7',
+      width: '100%'
+    }
+  }, "OR")), /*#__PURE__*/React.createElement("form", {
+    onSubmit: handleFormSubmit
+  }, /*#__PURE__*/React.createElement("input", {
+    type: "text",
+    placeholder: "Enter url",
+    value: formData.url,
+    onChange: e => setFormData(prev => ({
+      ...prev,
+      url: e.target.value
+    }))
+  }), /*#__PURE__*/React.createElement("input", {
+    type: "text",
+    placeholder: "Enter alt",
+    value: formData.alt,
+    onChange: e => setFormData(prev => ({
+      ...prev,
+      alt: e.target.value
+    }))
+  }), /*#__PURE__*/React.createElement(Button, {
+    type: "submit"
+  }, "Save"))));
+};
+export default Embed;

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

@@ -0,0 +1,70 @@
+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";
+const Image = ({
+  attributes,
+  element,
+  children
+}) => {
+  const {
+    url,
+    alt
+  } = element;
+  const editor = useSlateStatic();
+  const selected = useSelected();
+  const focused = useFocused();
+  const [parentDOM, setParentDOM] = useState(null);
+  const [size, onMouseDown, resizing, onLoad] = useResize({
+    parentDOM,
+    size: element?.size
+  });
+  const arr = Array.from(Node.elements(editor));
+  const ele = arr.find(([elem]) => element === elem);
+  useEffect(() => {
+    if (editor && ele[1] !== undefined) {
+      const dom = ReactEditor.toDOMNode(editor, Node.get(editor, ele[1]));
+      setParentDOM(dom);
+      onLoad(dom);
+    }
+  }, []);
+  useEffect(() => {
+    if (!resizing) {
+      Transforms.setNodes(editor, {
+        size: size
+      });
+    }
+  }, [resizing]);
+  return /*#__PURE__*/React.createElement("div", _extends({}, 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);
+};
+export default Image;

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

@@ -0,0 +1,60 @@
+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";
+const Video = ({
+  attributes,
+  element,
+  children
+}) => {
+  const {
+    url,
+    alt
+  } = element;
+  const [size, onMouseDown, resizing] = useResize();
+  const selected = useSelected();
+  const focused = useFocused();
+  return /*#__PURE__*/React.createElement("div", _extends({}, 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);
+};
+export default Video;

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

@@ -0,0 +1,24 @@
+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";
+const Equation = ({
+  attributes,
+  element,
+  children
+}) => {
+  const {
+    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));
+};
+export default Equation;

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

@@ -0,0 +1,66 @@
+import { useRef, useState } from 'react';
+import Button from '../../common/Button';
+import Icon from '../../common/Icon';
+import usePopup from '../../utils/customHooks/usePopup';
+import { insertEquation } from '../../utils/equation';
+import { Transforms } from 'slate';
+const EquationButton = ({
+  editor
+}) => {
+  const equationInputRef = useRef(null);
+  const [showInput, setShowInput] = usePopup(equationInputRef);
+  const [math, setMath] = useState('');
+  const [displayInline, setDisplayInline] = useState(false);
+  const [selection, setSelection] = useState();
+  const toggleButton = () => {
+    setShowInput(prev => !prev);
+    setDisplayInline(false);
+    setSelection(editor.selection);
+  };
+  const handleInputChange = ({
+    target
+  }) => {
+    if (target.type === 'checkbox') {
+      setDisplayInline(prev => !prev);
+    } else {
+      setMath(target.value);
+    }
+  };
+  const handleAddEquation = () => {
+    if (!math) return;
+    selection && Transforms.select(editor, selection);
+    insertEquation(editor, math, displayInline);
+    console.log('btn click');
+    setShowInput(false);
+  };
+  return /*#__PURE__*/React.createElement("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")));
+};
+export default EquationButton;

package/dist/Editor/Elements/Equation/styles.css

@@ -0,0 +1,4 @@
+.equation-inline{
+    display: inline;
+    position: relative;
+}

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

@@ -0,0 +1,53 @@
+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";
+const Grid = props => {
+  const {
+    attributes,
+    children,
+    element
+  } = props;
+  const {
+    grid
+  } = element;
+  const editor = useSlateStatic();
+  const selected = useSelected();
+  const onAddGridItem = () => {
+    const currentPath = editor.selection?.anchor?.path;
+    const ancestorsPath = Path.ancestors(currentPath, {
+      reverse: true
+    });
+    const insertPath = ancestorsPath[1];
+    if (insertPath) {
+      insertPath[insertPath.length - 1] = element.children.length;
+      Transforms.insertNodes(editor, [{
+        ...gridItem()
+      }], {
+        at: insertPath
+      });
+      // new line
+      Transforms.insertNodes(editor, [{
+        type: "paragraph",
+        children: [{
+          text: ""
+        }]
+      }], {
+        at: [editor.children.length]
+      });
+    }
+  };
+  const GridToolBar = () => {
+    return selected ? /*#__PURE__*/React.createElement("div", {
+      className: "grid-container-toolbar",
+      contentEditable: false
+    }, /*#__PURE__*/React.createElement("button", {
+      onClick: onAddGridItem
+    }, "+ Add Item")) : null;
+  };
+  return /*#__PURE__*/React.createElement("div", _extends({
+    className: `grid-container ${grid}`
+  }, attributes), /*#__PURE__*/React.createElement(GridToolBar, null), children);
+};
+export default Grid;

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

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

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

@@ -0,0 +1,53 @@
+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";
+const GridItem = props => {
+  const {
+    attributes,
+    children,
+    element
+  } = props;
+  const {
+    grid
+  } = element;
+  const editor = useSlateStatic();
+  const selected = useSelected();
+  const itemWidth = (grid || 6) / 12 * 100;
+  const onItemSizeDecrease = () => {
+    Transforms.setNodes(editor, {
+      grid: grid <= 1 ? 1 : grid - 1
+    }, {
+      match: node => {
+        return Element.matches(node, element);
+      }
+    });
+  };
+  const onItemSizeIncrease = () => {
+    Transforms.setNodes(editor, {
+      grid: grid >= 12 ? 12 : grid + 1
+    }, {
+      match: node => {
+        return Element.matches(node, element);
+      }
+    });
+  };
+  const GridItemToolbar = () => {
+    return selected ? /*#__PURE__*/React.createElement("div", {
+      contentEditable: false,
+      className: "grid-item-toolbar"
+    }, /*#__PURE__*/React.createElement("button", {
+      onClick: onItemSizeDecrease
+    }, "-"), /*#__PURE__*/React.createElement("button", {
+      onClick: onItemSizeIncrease
+    }, "+")) : null;
+  };
+  return /*#__PURE__*/React.createElement("div", _extends({
+    className: `grid-item xs-${grid}`
+  }, attributes, {
+    style: {
+      width: `${itemWidth}%`
+    }
+  }), children, /*#__PURE__*/React.createElement(GridItemToolbar, null));
+};
+export default GridItem;

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

@@ -0,0 +1,56 @@
+import { Transforms } from "slate";
+import React, { useRef, useState } from "react";
+import Button from "../../common/Button";
+import Icon from "../../common/Icon";
+import usePopup from "../../utils/customHooks/usePopup";
+const Id = ({
+  editor
+}) => {
+  const idInputRef = useRef(null);
+  const [showInput, setShowInput] = usePopup(idInputRef);
+  const [selection, setSelection] = useState();
+  const [id, setId] = useState("");
+  const toggleId = () => {
+    setSelection(editor.selection);
+    setShowInput(prev => !prev);
+  };
+  const handleId = () => {
+    // selection && Transforms.select(editor,selection);
+    if (!selection || !id) return;
+    Transforms.setNodes(editor, {
+      attr: {
+        id
+      }
+    }, {
+      at: selection
+    });
+    setShowInput(false);
+    setId("");
+  };
+  return /*#__PURE__*/React.createElement("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"
+  }))));
+};
+export default Id;

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

@@ -0,0 +1,34 @@
+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';
+const Link = ({
+  attributes,
+  element,
+  children
+}) => {
+  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: ""
+  }))));
+};
+export default Link;