@flozy/editor 1.0.5 → 1.0.7

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

@@ -0,0 +1,77 @@
+import { useRef, useState } from "react";
+import { insertLink } from "../../utils/link.js";
+import Button from "../../common/Button.jsx";
+import Icon from "../../common/Icon.jsx";
+import { isBlockActive } from "../../utils/SlateUtilityFunctions.js";
+import usePopup from "../../utils/customHooks/usePopup.jsx";
+import { Transforms } from "slate";
+const LinkButton = props => {
+  const {
+    editor
+  } = props;
+  const linkInputRef = useRef(null);
+  const [showInput, setShowInput] = usePopup(linkInputRef);
+  const [url, setUrl] = useState("");
+  const [showInNewTab, setShowInNewTab] = useState(false);
+  const [selection, setSelection] = useState();
+  const handleInsertLink = () => {
+    Transforms.select(editor, selection);
+    insertLink(editor, {
+      url,
+      showInNewTab
+    });
+    setUrl("");
+    setShowInput(prev => !prev);
+    setShowInNewTab(false);
+  };
+  const toggleLink = () => {
+    setSelection(editor.selection);
+    setShowInput(prev => !prev);
+  };
+  const handleInputChange = ({
+    target
+  }) => {
+    if (target.type === "checkbox") {
+      setShowInNewTab(prev => !prev);
+    } else {
+      setUrl(target.value);
+    }
+  };
+  return /*#__PURE__*/React.createElement("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"))));
+};
+export default LinkButton;

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

@@ -0,0 +1,20 @@
+.link{
+  display: inline;
+  position: relative;
+}
+.link-popup{
+    position: absolute;
+  left: 0;
+  display: flex;
+  align-items: center;
+  background-color: white;
+  padding: 6px 10px;
+  gap: 10px;
+  border-radius: 6px;
+  border: 1px solid lightgray;
+  width: fit-content;
+  z-index: 1;
+}
+img{
+  height: 15px;
+}

package/dist/Editor/Elements/Mentions/Mentions.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 { useSelected, useFocused } from "slate-react";
+const Mentions = ({
+  attributes,
+  children,
+  element
+}) => {
+  const selected = useSelected();
+  const focused = useFocused();
+  const style = {
+    padding: "3px 3px 2px",
+    margin: "0 1px",
+    verticalAlign: "baseline",
+    display: "inline-block",
+    borderRadius: "4px",
+    backgroundColor: "#eee",
+    fontSize: "0.9em",
+    boxShadow: selected && focused ? "0 0 0 2px #B4D5FF" : "none"
+  };
+  // See if our empty text child has any styling marks applied and apply those
+  if (element.children[0].bold) {
+    style.fontWeight = "bold";
+  }
+  if (element.children[0].italic) {
+    style.fontStyle = "italic";
+  }
+  return /*#__PURE__*/React.createElement("span", _extends({}, attributes, {
+    contentEditable: false,
+    "data-cy": `mention-${element.character.replace(" ", "-")}`,
+    style: style
+  }), "@", element.character, children);
+};
+export default Mentions;

package/dist/Editor/Elements/NewLine/NewLineButton.js

@@ -0,0 +1,22 @@
+import React from "react";
+import KeyboardReturnIcon from "@mui/icons-material/KeyboardReturn";
+import { Transforms } from "slate";
+import { useSlateStatic } from "slate-react";
+const NewLineButton = props => {
+  const editor = useSlateStatic();
+  const onAddNewLine = () => {
+    Transforms.insertNodes(editor, [{
+      type: "paragraph",
+      children: [{
+        text: ""
+      }]
+    }], {
+      at: [editor.children.length]
+    });
+  };
+  return /*#__PURE__*/React.createElement("button", {
+    title: "New Line",
+    onClick: onAddNewLine
+  }, /*#__PURE__*/React.createElement(KeyboardReturnIcon, null));
+};
+export default NewLineButton;

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

@@ -0,0 +1,15 @@
+import React from "react";
+const Table = ({
+  attributes,
+  children,
+  element
+}) => {
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      minWidth: "100%",
+      maxWidth: "100%",
+      overflow: "auto"
+    }
+  }, /*#__PURE__*/React.createElement("table", null, /*#__PURE__*/React.createElement("tbody", attributes, children)));
+};
+export default Table;

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

@@ -0,0 +1,18 @@
+.table-option{
+    display: flex;
+    margin: 5px 2px;
+    gap: 5px;
+}
+.table-option{
+    white-space: nowrap;
+}
+.table-input{
+    display: grid;
+    grid-template-columns: auto auto auto auto auto auto;
+    gap: 3px;
+}
+.table-unit{
+    width:15px;
+    height:15px;
+    border: 1px solid lightgray;
+}

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

@@ -0,0 +1,93 @@
+import React, { useEffect, useRef, useState } from 'react';
+import Icon from '../../common/Icon';
+import usePopup from '../../utils/customHooks/usePopup';
+import { Transforms } from 'slate';
+import { TableUtil } from '../../utils/table.js';
+import './TableSelector.css';
+const TableSelector = ({
+  editor
+}) => {
+  const tableOptionsRef = useRef();
+  const [selection, setSelection] = useState();
+  const [showOptions, setShowOptions] = usePopup(tableOptionsRef);
+  const [tableData, setTableData] = useState({
+    row: 0,
+    column: 0
+  });
+  const [tableInput, setTableInput] = useState(Array.from({
+    length: 6
+  }, () => Array.from({
+    length: 6
+  }, (v, i) => ({
+    bg: 'lightGray',
+    column: i
+  }))));
+  useEffect(() => {
+    const newTable = Array.from({
+      length: 6
+    }, (obj, row) => Array.from({
+      length: 6
+    }, (v, col) => ({
+      bg: row + 1 <= tableData.row && col + 1 <= tableData.column ? 'orange' : 'lightgray',
+      column: col
+    })));
+    setTableInput(newTable);
+  }, [tableData]);
+  useEffect(() => {
+    if (!showOptions) {
+      setTableData({
+        row: 0,
+        column: 0
+      });
+    }
+  }, [showOptions]);
+  const table = new TableUtil(editor);
+  const handleButtonClick = () => {
+    setSelection(editor.selection);
+    setShowOptions(prev => !prev);
+  };
+  const handleInsert = () => {
+    selection && Transforms.select(editor, selection);
+    setTableData({
+      row: -1,
+      column: -1
+    });
+    table.insertTable(tableData.row, tableData.column);
+    setShowOptions(false);
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    ref: tableOptionsRef,
+    className: "popup-wrapper"
+  }, /*#__PURE__*/React.createElement("button", {
+    style: {
+      border: showOptions ? '1px solid lightgray' : 'none'
+    },
+    title: "table",
+    onClick: handleButtonClick
+  }, /*#__PURE__*/React.createElement(Icon, {
+    icon: "table"
+  })), showOptions && /*#__PURE__*/React.createElement("div", {
+    className: "popup"
+  }, /*#__PURE__*/React.createElement("span", {
+    style: {
+      fontSize: '0.85em'
+    }
+  }, /*#__PURE__*/React.createElement("i", null, `Insert a ${tableData.row >= 1 ? `${tableData.row} x ${tableData.column}` : ''} table`)), /*#__PURE__*/React.createElement("div", {
+    className: "table-input"
+  }, tableInput.map((grp, row) => grp.map(({
+    column,
+    bg
+  }, col) => /*#__PURE__*/React.createElement("div", {
+    key: row + col,
+    onClick: () => handleInsert(),
+    onMouseOver: () => setTableData({
+      row: row + 1,
+      column: column + 1
+    }),
+    className: "table-unit",
+    style: {
+      border: `1px solid ${bg}`
+    }
+  }))))));
+};
+export default TableSelector;

package/dist/Editor/Elements/TableContextMenu/TableContextMenu.js

@@ -0,0 +1,91 @@
+import React, { useState } from "react";
+import useContextMenu from "../../utils/customHooks/useContextMenu.js";
+import Icon from "../../common/Icon.jsx";
+import "./styles.css";
+import { TableUtil } from "../../utils/table.js";
+import { Transforms } from "slate";
+import { ReactEditor } from "slate-react";
+const TableContextMenu = props => {
+  const {
+    editor
+  } = props;
+  const [selection, setSelection] = useState();
+  const [showMenu, {
+    top,
+    left
+  }] = useContextMenu(editor, "table", setSelection);
+  const table = new TableUtil(editor);
+  const menu = [{
+    icon: "insertColumnRight",
+    text: "Insert Columns to the Right",
+    action: {
+      type: "insertColumn",
+      position: "after"
+    }
+  }, {
+    icon: "insertColumnLeft",
+    text: "Insert Columns to the Left",
+    action: {
+      type: "insertColumn",
+      position: "at"
+    }
+  }, {
+    icon: "insertRowAbove",
+    text: "Insert Row Above",
+    action: {
+      type: "insertRow",
+      positon: "at"
+    }
+  }, {
+    icon: "insertRowBelow",
+    text: "Insert Row Below",
+    action: {
+      type: "insertRow",
+      position: "after"
+    }
+  }, {
+    icon: "trashCan",
+    text: "Remove Table",
+    action: {
+      type: "remove"
+    }
+  }];
+  const handleInsert = ({
+    type,
+    position
+  }) => {
+    Transforms.select(editor, selection);
+    switch (type) {
+      case "insertRow":
+        table.insertRow(position);
+        break;
+      case "insertColumn":
+        table.insertColumn(position);
+        break;
+      case "remove":
+        table.removeTable();
+        break;
+      default:
+        return;
+    }
+    ReactEditor.focus(editor);
+  };
+  return showMenu && /*#__PURE__*/React.createElement("div", {
+    className: "contextMenu",
+    style: {
+      top,
+      left
+    }
+  }, menu.map(({
+    icon,
+    text,
+    action
+  }, index) => /*#__PURE__*/React.createElement("div", {
+    className: "menuOption",
+    key: index,
+    onClick: () => handleInsert(action)
+  }, /*#__PURE__*/React.createElement(Icon, {
+    icon: icon
+  }), /*#__PURE__*/React.createElement("span", null, text))));
+};
+export default TableContextMenu;

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

@@ -0,0 +1,18 @@
+.contextMenu{
+    width: fit-content;
+    height: fit-content;
+    position: fixed;
+    background: white;
+    border: 1px solid lightgray;
+    border-radius: 10px;
+    padding: 0.5%;
+    display: flex;
+    gap: 15px;
+    flex-direction: column;
+    cursor: pointer;
+}
+
+.menuOption {
+    display: flex;
+    gap:15px;
+}

package/dist/Editor/RemoteCursorOverlay/Overlay.js

@@ -0,0 +1,75 @@
+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, { useRef } from "react";
+import { useRemoteCursorOverlayPositions } from "@slate-yjs/react";
+function Caret({
+  caretPosition,
+  data
+}) {
+  const caretStyle = {
+    ...caretPosition,
+    background: data?.color || "#d33d3db5"
+  };
+  const labelStyle = {
+    transform: "translateY(-100%)",
+    background: data?.color || "#d33d3db5"
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      ...caretStyle,
+      position: "absolute",
+      width: "0.5px"
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: "absolute",
+      color: "#FFF",
+      whiteSpace: "nowrap",
+      top: 0,
+      ...labelStyle
+    }
+  }, data?.name));
+}
+function RemoteSelection({
+  data,
+  selectionRects,
+  caretPosition
+}) {
+  if (!data) {
+    return null;
+  }
+  const selectionStyle = {
+    backgroundColor: data.color
+  };
+  return /*#__PURE__*/React.createElement(React.Fragment, null, selectionRects.map((position, i) => /*#__PURE__*/React.createElement("div", {
+    style: {
+      ...selectionStyle,
+      ...position,
+      position: "absolute",
+      pointerEvents: "none"
+    }
+    // eslint-disable-next-line react/no-array-index-key
+    ,
+    key: i
+  })), caretPosition && /*#__PURE__*/React.createElement(Caret, {
+    caretPosition: caretPosition,
+    data: data
+  }));
+}
+export function RemoteCursorOverlay({
+  className,
+  children
+}) {
+  const containerRef = useRef(null);
+  const [cursors] = useRemoteCursorOverlayPositions({
+    containerRef
+  });
+  return /*#__PURE__*/React.createElement("div", {
+    className: `${className}`,
+    style: {
+      position: "relative"
+    },
+    ref: containerRef
+  }, children, cursors.map(cursor => /*#__PURE__*/React.createElement(RemoteSelection, _extends({
+    key: cursor.clientId
+  }, cursor))));
+}

package/dist/Editor/Toolbar/Toolbar.js

@@ -0,0 +1,166 @@
+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 { useSlate } from "slate-react";
+import Button from "../common/Button";
+import Icon from "../common/Icon";
+import { toggleBlock, toggleMark, isMarkActive, addMarkData, isBlockActive, activeMark } from "../utils/SlateUtilityFunctions.js";
+import useFormat from "../utils/customHooks/useFormat.js";
+import defaultToolbarGroups from "./toolbarGroups.js";
+import "./styles.css";
+import ColorPicker from "../Elements/Color Picker/ColorPicker";
+import LinkButton from "../Elements/Link/LinkButton";
+import Embed from "../Elements/Embed/Embed";
+import TableSelector from "../Elements/Table/TableSelector";
+import EquationButton from "../Elements/Equation/EquationButton";
+import Id from "../Elements/ID/Id";
+import TableContextMenu from "../Elements/TableContextMenu/TableContextMenu";
+import CodeToTextButton from "../Elements/CodeToText/CodeToTextButton";
+import HtmlContextMenu from "../Elements/CodeToText/HtmlContextMenu";
+import GridButton from "../Elements/Grid/GridButton";
+import NewLineButton from "../Elements/NewLine/NewLineButton";
+const Toolbar = props => {
+  const {
+    handleCodeToText
+  } = props;
+  const editor = useSlate();
+  const isTable = useFormat(editor, "table");
+  const [toolbarGroups, setToolbarGroups] = useState(defaultToolbarGroups);
+  useEffect(() => {
+    // Filter out the groups which are not allowed to be inserted when a table is in focus.
+    let filteredGroups = [...defaultToolbarGroups];
+    if (isTable) {
+      filteredGroups = toolbarGroups.map(grp => grp.filter(element =>
+      //groups that are not supported inside the table
+      !["codeToText"].includes(element.type)));
+      filteredGroups = filteredGroups.filter(elem => elem.length);
+    }
+    setToolbarGroups(filteredGroups);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isTable]);
+  const BlockButton = ({
+    format
+  }) => {
+    return /*#__PURE__*/React.createElement(Button, {
+      active: isBlockActive(editor, format),
+      format: format,
+      onMouseDown: e => {
+        e.preventDefault();
+        toggleBlock(editor, format);
+      }
+    }, /*#__PURE__*/React.createElement(Icon, {
+      icon: format
+    }));
+  };
+  const MarkButton = ({
+    format
+  }) => {
+    return /*#__PURE__*/React.createElement(Button, {
+      active: isMarkActive(editor, format),
+      format: format,
+      onMouseDown: e => {
+        e.preventDefault();
+        toggleMark(editor, format);
+      }
+    }, /*#__PURE__*/React.createElement(Icon, {
+      icon: format
+    }));
+  };
+  const Dropdown = ({
+    format,
+    options
+  }) => {
+    return /*#__PURE__*/React.createElement("select", {
+      value: activeMark(editor, format),
+      onChange: e => changeMarkData(e, format)
+    }, options.map((item, index) => /*#__PURE__*/React.createElement("option", {
+      key: index,
+      value: item.value
+    }, item.text)));
+  };
+  const changeMarkData = (event, format) => {
+    event.preventDefault();
+    const value = event.target.value;
+    addMarkData(editor, {
+      format,
+      value
+    });
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    className: "toolbar"
+  }, toolbarGroups.map((group, index) => /*#__PURE__*/React.createElement("span", {
+    key: index,
+    className: "toolbar-grp"
+  }, group.map((element, gi) => {
+    switch (element.type) {
+      case "block":
+        return /*#__PURE__*/React.createElement(BlockButton, _extends({
+          key: element.id
+        }, element));
+      case "mark":
+        return /*#__PURE__*/React.createElement(MarkButton, _extends({
+          key: element.id
+        }, element));
+      case "dropdown":
+        return /*#__PURE__*/React.createElement(Dropdown, _extends({
+          key: element.id
+        }, element));
+      case "link":
+        return /*#__PURE__*/React.createElement(LinkButton, {
+          key: element.id,
+          active: isBlockActive(editor, "link"),
+          editor: editor
+        });
+      case "embed":
+        return /*#__PURE__*/React.createElement(Embed, {
+          key: element.id,
+          format: element.format,
+          editor: editor
+        });
+      case "color-picker":
+        return /*#__PURE__*/React.createElement(ColorPicker, {
+          key: element.id,
+          activeMark: activeMark,
+          format: element.format,
+          editor: editor
+        });
+      case "table":
+        return /*#__PURE__*/React.createElement(TableSelector, {
+          key: element.id,
+          editor: editor
+        });
+      case "id":
+        return /*#__PURE__*/React.createElement(Id, {
+          key: `gi_id_${gi}`,
+          editor: editor
+        });
+      case "equation":
+        return /*#__PURE__*/React.createElement(EquationButton, {
+          key: `gi_equation_${gi}`,
+          editor: editor
+        });
+      case "codeToText":
+        return /*#__PURE__*/React.createElement(CodeToTextButton, {
+          key: `gi_codeToText_${gi}`,
+          handleButtonClick: handleCodeToText
+        });
+      case "grid":
+        return /*#__PURE__*/React.createElement(GridButton, {
+          key: element.id,
+          editor: editor
+        });
+      case "newLine":
+        return /*#__PURE__*/React.createElement(NewLineButton, {
+          key: element.id,
+          editor: editor
+        });
+      default:
+        return null;
+    }
+  }))), /*#__PURE__*/React.createElement(TableContextMenu, {
+    editor: editor
+  }), /*#__PURE__*/React.createElement(HtmlContextMenu, {
+    editor: editor,
+    handleCodeToText: handleCodeToText
+  }));
+};
+export default Toolbar;

package/dist/Editor/Toolbar/styles.css

@@ -0,0 +1,28 @@
+.toolbar{
+    border-radius: 10px;
+background: #ffffff;
+box-shadow:  -8px 8px 13px #ededed,
+             8px -8px 13px #ffffff;
+    margin:4px 0;
+    display:flex;
+    flex-wrap:wrap;
+    align-items:center;
+    padding: 15px 10px;
+    row-gap: 15px;
+    position: -webkit-sticky;
+  position: sticky;
+  top: 0;
+  z-index: 2;
+}
+.toolbar-grp>*{
+    margin-right: 10px;
+    cursor: pointer;
+}
+.toolbar-grp{
+    margin:0 10px;
+}
+select{
+    height: 30px;
+    border: none;
+    width: 6.9rem;
+}