@flozy/editor 1.1.5 → 1.1.7

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

@@ -1,8 +1,8 @@
-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 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 = ({

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

@@ -1,10 +1,10 @@
 import { useRef, useState } from "react";
+import { Transforms } from "slate";
+import { Dialog, DialogActions, DialogContent, DialogTitle, FormControl, FormControlLabel, Grid, TextField, Button, IconButton } from "@mui/material";
+import { CheckBox } from "@mui/icons-material";
 import { insertLink } from "../../utils/link";
-import Button from "../../common/Button";
 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 => {
@@ -12,7 +12,7 @@ const LinkButton = props => {
     editor
   } = props;
   const linkInputRef = useRef(null);
-  const [showInput, setShowInput] = usePopup(linkInputRef);
+  const [showInput, setShowInput] = useState(false);
   const [url, setUrl] = useState("");
   const [showInNewTab, setShowInNewTab] = useState(false);
   const [selection, setSelection] = useState();
@@ -23,62 +23,75 @@ const LinkButton = props => {
       showInNewTab
     });
     setUrl("");
-    setShowInput(prev => !prev);
+    setShowInput(false);
     setShowInNewTab(false);
   };
   const toggleLink = () => {
     setSelection(editor.selection);
-    setShowInput(prev => !prev);
+    setShowInput(true);
   };
   const handleInputChange = ({
     target
   }) => {
     if (target.type === "checkbox") {
-      setShowInNewTab(prev => !prev);
+      setShowInNewTab(target.checked);
     } else {
       setUrl(target.value);
     }
   };
+  const handleClose = () => {
+    setShowInput(false);
+  };
   return /*#__PURE__*/_jsxs("div", {
     ref: linkInputRef,
     className: "popup-wrapper1",
-    children: [/*#__PURE__*/_jsx(Button, {
+    children: [/*#__PURE__*/_jsx(IconButton, {
       className: showInput ? "clicked" : "",
-      active: isBlockActive(editor, "link"),
+      active: isBlockActive(editor, "link") ? "active" : "",
       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", {
+    }), showInput && /*#__PURE__*/_jsxs(Dialog, {
+      open: true,
+      children: [/*#__PURE__*/_jsx(DialogTitle, {
+        children: "Link"
+      }), /*#__PURE__*/_jsx(DialogContent, {
+        children: /*#__PURE__*/_jsxs(Grid, {
+          container: true,
+          spacing: 2,
+          children: [/*#__PURE__*/_jsx(Grid, {
+            item: true,
+            xs: 12,
+            children: /*#__PURE__*/_jsx(TextField, {
+              size: "small",
+              fullWidth: true,
+              value: url,
+              placeholder: "https://google.com",
+              onChange: handleInputChange
+            })
+          }), /*#__PURE__*/_jsx(Grid, {
+            item: true,
+            xs: 12,
+            children: /*#__PURE__*/_jsx(FormControl, {
+              children: /*#__PURE__*/_jsx(FormControlLabel, {
+                control: /*#__PURE__*/_jsx(CheckBox, {
+                  checked: showInNewTab,
+                  onChange: handleInputChange
+                }),
+                label: "Open in new tab"
+              })
+            })
+          })]
+        })
+      }), /*#__PURE__*/_jsxs(DialogActions, {
+        children: [/*#__PURE__*/_jsx(Button, {
+          onClick: handleClose,
+          children: "Cancel"
+        }), /*#__PURE__*/_jsx(Button, {
           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"
+          children: "Add"
         })]
       })]
     })]

package/dist/Editor/Elements/PageSettings/PageSettingsButton.js

@@ -5,22 +5,23 @@ import ArticleIcon from "@mui/icons-material/Article";
 import { useSlateStatic, ReactEditor } from "slate-react";
 import PageSettingsPopup from "./PageSettingsPopup";
 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 PageSettingsButton = props => {
   const {
     customProps
   } = props;
   const [openSetttings, setOpenSettings] = useState(false);
-  const [pageProps, setPageProps] = useState({});
   const editor = useSlateStatic();
   const onSettings = () => {
     const {
-      element
+      element,
+      path
     } = getPageSettingsPath();
-    if (element) {
-      setPageProps(element?.pageProps || {});
-      setOpenSettings(true);
-    }
+    setOpenSettings({
+      element: element?.pageProps || {},
+      path
+    });
   };
   const getPageSettingsPath = () => {
     try {
@@ -30,11 +31,17 @@ const PageSettingsButton = props => {
           return !Editor.isEditor(n) && Element.isElement(n) && n.type === "page-settings";
         }
       });
-      const path = ReactEditor.findPath(editor, pageSettingsNode[0]);
-      return {
-        path,
-        element: pageSettingsNode[0]
-      };
+      if (pageSettingsNode && pageSettingsNode[0]) {
+        const path = ReactEditor.findPath(editor, pageSettingsNode[0]);
+        return {
+          path,
+          element: pageSettingsNode[0]
+        };
+      } else {
+        return {
+          path: null
+        };
+      }
     } catch (err) {
       console.log(err);
       return {
@@ -43,20 +50,17 @@ const PageSettingsButton = props => {
     }
   };
   const onSave = data => {
-    const {
-      path
-    } = getPageSettingsPath();
     const updateData = {
       ...data
     };
     delete updateData.children;
-    if (path) {
+    if (openSetttings?.path) {
       Transforms.setNodes(editor, {
         pageProps: {
           ...updateData
         }
       }, {
-        at: path
+        at: openSetttings?.path
       });
     } else {
       Transforms.insertNodes(editor, [{
@@ -74,11 +78,13 @@ const PageSettingsButton = props => {
   const onClose = () => {
     setOpenSettings(false);
   };
-  return /*#__PURE__*/_jsxs(IconButton, {
-    title: "Page Settings",
-    onClick: onSettings,
-    children: [/*#__PURE__*/_jsx(ArticleIcon, {}), openSetttings ? /*#__PURE__*/_jsx(PageSettingsPopup, {
-      element: pageProps,
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(IconButton, {
+      title: "Page Settings",
+      onClick: onSettings,
+      children: /*#__PURE__*/_jsx(ArticleIcon, {})
+    }), openSetttings !== false ? /*#__PURE__*/_jsx(PageSettingsPopup, {
+      element: openSetttings?.element || {},
       onSave: onSave,
       onClose: onClose,
       customProps: customProps

package/dist/Editor/Elements/Table/Table.js

@@ -1,30 +1,180 @@
-import React from "react";
+import React, { useState } from "react";
+import { Transforms } from "slate";
+import { useSelected, useSlateStatic } from "slate-react";
+import { IconButton } from "@mui/material";
+import AlignHorizontalLeftIcon from "@mui/icons-material/AlignHorizontalLeft";
+import AlignHorizontalRightIcon from "@mui/icons-material/AlignHorizontalRight";
+import AlignVerticalTopIcon from "@mui/icons-material/AlignVerticalTop";
+import AlignVerticalBottomIcon from "@mui/icons-material/AlignVerticalBottom";
+import DeleteForeverIcon from "@mui/icons-material/DeleteForever";
+import SettingsIcon from "@mui/icons-material/Settings";
+import DeleteCellIcon from "./DeleteCellIcon";
+import DeleteRowIcon from "./DeleteRowIcon";
+import { TableUtil } from "../../utils/table";
+import TablePopup from "./TablePopup";
+import "./table.css";
 import { jsx as _jsx } from "react/jsx-runtime";
-const Table = ({
-  attributes,
-  children,
-  element
-}) => {
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const TABLE_MENUS = [{
+  Icon: AlignHorizontalRightIcon,
+  text: "Insert Columns to the Right",
+  action: {
+    type: "insertColumn",
+    position: "after"
+  }
+}, {
+  Icon: AlignHorizontalLeftIcon,
+  text: "Insert Columns to the Left",
+  action: {
+    type: "insertColumn",
+    position: "at"
+  }
+}, {
+  Icon: AlignVerticalTopIcon,
+  text: "Insert Row Above",
+  action: {
+    type: "insertRow",
+    positon: "at"
+  }
+}, {
+  Icon: AlignVerticalBottomIcon,
+  text: "Insert Row Below",
+  action: {
+    type: "insertRow",
+    position: "after"
+  }
+}, {
+  Icon: DeleteRowIcon,
+  text: "Delete Row",
+  action: {
+    type: "deleteRow"
+  }
+}, {
+  Icon: DeleteCellIcon,
+  text: "Delete Column",
+  action: {
+    type: "deleteColumn"
+  }
+}, {
+  Icon: SettingsIcon,
+  text: "Settings",
+  action: {
+    type: "settings"
+  }
+}, {
+  Icon: DeleteForeverIcon,
+  text: "Remove Table",
+  action: {
+    type: "remove"
+  }
+}];
+const Table = props => {
+  const {
+    element,
+    attributes,
+    children,
+    customProps
+  } = props;
+  const [openSetttings, setOpenSettings] = useState(false);
   const {
     bgColor,
     borderColor
   } = element;
-  return /*#__PURE__*/_jsx("div", {
+  const editor = useSlateStatic();
+  const selected = useSelected();
+  const table = new TableUtil(editor);
+  const tableProps = table.getTableProps();
+  const handleAction = ({
+    type,
+    position
+  }) => () => {
+    Transforms.select(editor, editor.selection);
+    switch (type) {
+      case "insertRow":
+        table.insertRow(position);
+        break;
+      case "insertColumn":
+        table.insertColumn(position);
+        break;
+      case "deleteRow":
+        table.deleteRow();
+        break;
+      case "deleteColumn":
+        table.deleteColumn();
+        break;
+      case "remove":
+        table.removeTable();
+        break;
+      case "settings":
+        if (tableProps) {
+          onSettings(true);
+        }
+        break;
+      default:
+        return;
+    }
+  };
+  const ToolBar = () => {
+    return selected ? /*#__PURE__*/_jsx("div", {
+      contentEditable: false,
+      style: {
+        position: "absolute",
+        top: "-40px",
+        left: 0,
+        backgroundColor: "#CCC"
+      },
+      children: TABLE_MENUS.map(({
+        Icon,
+        text,
+        action
+      }) => {
+        return /*#__PURE__*/_jsx(IconButton, {
+          title: text,
+          onClick: handleAction(action),
+          children: /*#__PURE__*/_jsx(Icon, {})
+        }, text);
+      })
+    }) : null;
+  };
+  const onSettings = () => {
+    setOpenSettings(true);
+  };
+  const onSave = data => {
+    const updateData = {
+      ...data
+    };
+    delete updateData.children;
+    delete updateData.type;
+    table.updateTableStyle(updateData, {
+      ...tableProps
+    });
+    onClose();
+  };
+  const onClose = () => {
+    setOpenSettings(false);
+  };
+  return /*#__PURE__*/_jsxs("div", {
     style: {
       minWidth: "100%",
       maxWidth: "100%",
       position: "relative"
     },
-    children: /*#__PURE__*/_jsx("table", {
+    children: [/*#__PURE__*/_jsx("table", {
       style: {
         backgroundColor: bgColor,
-        border: `1px solid ${borderColor}`
+        border: `1px solid ${borderColor}`,
+        width: "auto"
       },
       children: /*#__PURE__*/_jsx("tbody", {
         ...attributes,
         children: children
       })
-    })
+    }), /*#__PURE__*/_jsx(ToolBar, {}), openSetttings ? /*#__PURE__*/_jsx(TablePopup, {
+      element: tableProps?.styleProps || {},
+      onSave: onSave,
+      onClose: onClose,
+      customProps: customProps
+    }) : null]
   });
 };
 export default Table;

package/dist/Editor/Elements/Table/TableCell.js

@@ -1,89 +1,50 @@
-import React, { useState } from "react";
-import { Transforms, Editor, Element } from "slate";
+import React, { useState, useEffect } from "react";
+import { Editor, Element } from "slate";
 import { useSelected, useSlateStatic, ReactEditor } from "slate-react";
-import { IconButton } from "@mui/material";
-import AlignHorizontalLeftIcon from "@mui/icons-material/AlignHorizontalLeft";
-import AlignHorizontalRightIcon from "@mui/icons-material/AlignHorizontalRight";
-import AlignVerticalTopIcon from "@mui/icons-material/AlignVerticalTop";
-import AlignVerticalBottomIcon from "@mui/icons-material/AlignVerticalBottom";
-import DeleteForeverIcon from "@mui/icons-material/DeleteForever";
-import SettingsIcon from "@mui/icons-material/Settings";
-import DeleteCellIcon from "./DeleteCellIcon";
-import DeleteRowIcon from "./DeleteRowIcon";
+import useTableResize from "../../utils/customHooks/useTableResize";
 import { TableUtil } from "../../utils/table";
-import TablePopup from "./TablePopup";
 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 TABLE_MENUS = [{
-  Icon: AlignHorizontalRightIcon,
-  text: "Insert Columns to the Right",
-  action: {
-    type: "insertColumn",
-    position: "after"
-  }
-}, {
-  Icon: AlignHorizontalLeftIcon,
-  text: "Insert Columns to the Left",
-  action: {
-    type: "insertColumn",
-    position: "at"
-  }
-}, {
-  Icon: AlignVerticalTopIcon,
-  text: "Insert Row Above",
-  action: {
-    type: "insertRow",
-    positon: "at"
-  }
-}, {
-  Icon: AlignVerticalBottomIcon,
-  text: "Insert Row Below",
-  action: {
-    type: "insertRow",
-    position: "after"
-  }
-}, {
-  Icon: DeleteRowIcon,
-  text: "Delete Row",
-  action: {
-    type: "deleteRow"
-  }
-}, {
-  Icon: DeleteCellIcon,
-  text: "Delete Column",
-  action: {
-    type: "deleteColumn"
-  }
-}, {
-  Icon: SettingsIcon,
-  text: "Settings",
-  action: {
-    type: "settings"
-  }
-}, {
-  Icon: DeleteForeverIcon,
-  text: "Remove Table",
-  action: {
-    type: "remove"
-  }
-}];
+const Resizer = ({
+  onMouseDown
+}) => {
+  return /*#__PURE__*/_jsx(_Fragment, {
+    children: /*#__PURE__*/_jsx("button", {
+      contentEditable: false,
+      onPointerDown: onMouseDown,
+      className: "cell-resizer",
+      style: {
+        width: "10px",
+        height: "100%",
+        position: "absolute",
+        right: "0px",
+        top: 0
+      }
+    })
+  });
+};
 const TableCell = props => {
   const {
     element,
     attributes,
-    children,
-    customProps
+    children
   } = props;
-  const [openSetttings, setOpenSettings] = useState(false);
   const {
     bgColor,
     borderColor
   } = element;
+  const [parentDOM, setParentDOM] = useState(null);
   const editor = useSlateStatic();
   const selected = useSelected();
+  const path = ReactEditor.findPath(editor, element);
+  const isHeader = path.length >= 2 ? path[path.length - 2] === 0 : false;
+  const [size, onMouseDown, resizing, onLoad] = useTableResize({
+    parentDOM,
+    size: element?.size
+  });
   const table = new TableUtil(editor);
   const tableProps = table.getTableProps();
-  const path = ReactEditor.findPath(editor, element);
   const [tableNode] = Editor.nodes(editor, {
     at: path,
     match: n => !Editor.isEditor(n) && Element.isElement(n) && n.type === "table"
@@ -94,87 +55,38 @@ const TableCell = props => {
   });
   const [parentProps] = tableNode || [{}];
   const [rowProps] = rowNode || [{}];
-  const handleInsert = ({
-    type,
-    position
-  }) => () => {
-    Transforms.select(editor, editor.selection);
-    switch (type) {
-      case "insertRow":
-        table.insertRow(position);
-        break;
-      case "insertColumn":
-        table.insertColumn(position);
-        break;
-      case "deleteRow":
-        table.deleteRow();
-        break;
-      case "deleteColumn":
-        table.deleteColumn();
-        break;
-      case "remove":
-        table.removeTable();
-        break;
-      case "settings":
-        if (tableProps) {
-          onSettings(true);
-        }
-        break;
-      default:
-        return;
+  useEffect(() => {
+    if (editor && element) {
+      const dom = ReactEditor.toDOMNode(editor, element);
+      setParentDOM(dom);
+      onLoad(element?.size || {
+        width: 100,
+        height: 100
+      });
     }
-  };
-  const ToolBar = () => {
-    return selected ? /*#__PURE__*/_jsx("div", {
-      contentEditable: false,
-      style: {
-        position: "absolute",
-        top: "-40px",
-        left: 0,
-        backgroundColor: "#CCC"
-      },
-      children: TABLE_MENUS.map(({
-        Icon,
-        text,
-        action
-      }) => {
-        return /*#__PURE__*/_jsx(IconButton, {
-          title: text,
-          onClick: handleInsert(action),
-          children: /*#__PURE__*/_jsx(Icon, {})
-        }, text);
-      })
-    }) : null;
-  };
-  const onSettings = () => {
-    setOpenSettings(true);
-  };
-  const onSave = data => {
-    const updateData = {
-      ...data
-    };
-    delete updateData.children;
-    delete updateData.type;
-    table.updateTableStyle(updateData, {
-      ...tableProps
-    });
-    onClose();
-  };
-  const onClose = () => {
-    setOpenSettings(false);
-  };
+  }, []);
+  useEffect(() => {
+    if (!resizing && tableProps) {
+      table.updateTableStyle({
+        "col.size": size
+      }, tableProps);
+    }
+  }, [resizing]);
+  const sizeProps = isHeader ? {
+    width: size?.width || 100
+  } : {};
   return /*#__PURE__*/_jsxs("td", {
     ...element.attr,
     ...attributes,
+    className: "editor-table-cell",
     style: {
+      position: "relative",
       backgroundColor: bgColor,
-      border: `3px solid ${borderColor || rowProps?.borderColor || parentProps?.borderColor}`
+      border: `3px solid ${borderColor || rowProps?.borderColor || parentProps?.borderColor}`,
+      ...(sizeProps || {})
     },
-    children: [/*#__PURE__*/_jsx(ToolBar, {}), children, openSetttings ? /*#__PURE__*/_jsx(TablePopup, {
-      element: tableProps?.styleProps || {},
-      onSave: onSave,
-      onClose: onClose,
-      customProps: customProps
+    children: [children, selected && isHeader ? /*#__PURE__*/_jsx(Resizer, {
+      onMouseDown: onMouseDown
     }) : null]
   });
 };

package/dist/Editor/Elements/Table/table.css

@@ -0,0 +1,13 @@
+.editor-table-cell {
+  /* min-width: 100px; */
+}
+
+.editor-table-cell .cell-resizer {
+  width: 10px;
+  height: 100%;
+  position: absolute;
+  right: 0;
+  top: 0;
+  visibility: visible;
+  background-color: aqua;
+}