@seafile/sea-email-editor 0.0.1

package/dist/extension/plugins/table/menu/table-size-selector/index.js

@@ -0,0 +1,98 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _reactstrap = require("reactstrap");
+var _helper = require("../../helper");
+require("./index.css");
+var _jsxRuntime = require("react/jsx-runtime");
+const TableSizeSelector = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
+  let {
+    target,
+    editor,
+    onHideSelector
+  } = _ref;
+  const [selectedGridInfo, setSelectedGridInfo] = (0, _react.useState)({
+    row: 0,
+    column: 0
+  });
+  const [showingGridInfo, setShowingGridInfo] = (0, _react.useState)({
+    row: 4,
+    column: 4
+  });
+  const preRenderTableGrid = (0, _react.useCallback)((rowIndex, columnIndex) => {
+    const selectedRowNums = rowIndex + 1;
+    const selectedColumnNums = columnIndex + 1;
+    let preRenderRowNum = selectedRowNums + 1;
+    let preRenderColumnNum = selectedColumnNums + 1;
+    if (preRenderRowNum < 4) {
+      preRenderRowNum = 4;
+    } else if (preRenderRowNum > 10) {
+      preRenderRowNum = 10;
+    }
+    if (preRenderColumnNum < 4) {
+      preRenderColumnNum = 4;
+    } else if (preRenderColumnNum > 10) {
+      preRenderColumnNum = 10;
+    }
+    setSelectedGridInfo({
+      row: selectedRowNums,
+      column: selectedColumnNums
+    });
+    setShowingGridInfo({
+      row: preRenderRowNum,
+      column: preRenderColumnNum
+    });
+  }, []);
+  const handleClickTableCell = (0, _react.useCallback)(() => {
+    (0, _helper.insertTable)(editor, selectedGridInfo.row, selectedGridInfo.column);
+    onHideSelector();
+  }, [editor, onHideSelector, selectedGridInfo.column, selectedGridInfo.row]);
+  const generateTableGrid = (0, _react.useCallback)((rowNum, columnNum) => {
+    const {
+      row: selectedRowIndex,
+      column: selectedColumnIndex
+    } = selectedGridInfo;
+    const rowElements = [];
+    for (let rowIndex = 0; rowIndex < rowNum; rowIndex++) {
+      const columnElements = [];
+      for (let columnIndex = 0; columnIndex < columnNum; columnIndex++) {
+        const isCellSelected = selectedRowIndex > rowIndex && selectedColumnIndex > columnIndex;
+        columnElements.push(/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          onMouseDown: handleClickTableCell,
+          onMouseEnter: () => preRenderTableGrid(rowIndex, columnIndex),
+          className: (0, _classnames.default)('sea-email-table-cell', {
+            selected: isCellSelected
+          })
+        }, `${rowIndex}-${columnIndex}`));
+      }
+      rowElements.push(/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "sea-email-table-row",
+        children: columnElements
+      }, rowIndex));
+    }
+    return rowElements;
+  }, [handleClickTableCell, preRenderTableGrid, selectedGridInfo]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactstrap.UncontrolledPopover, {
+    target: target,
+    trigger: "hover",
+    className: "sea-email-option-editor-popover sea-email-table-size-selector-popover",
+    placement: "right-start",
+    hideArrow: true,
+    fade: false,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "sea-email-table-size-selector-card",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "sea-email-table-grid-info",
+        children: `${selectedGridInfo.row} x ${selectedGridInfo.column}`
+      }), generateTableGrid(showingGridInfo.row, showingGridInfo.column)]
+    })
+  });
+});
+var _default = exports.default = TableSizeSelector;

package/dist/extension/plugins/table/model.js

@@ -0,0 +1,102 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.generateTableRow = exports.generateTableCell = exports.generateTable = void 0;
+var _core = require("../../core");
+var _elementTypes = require("../../constants/element-types");
+/**
+ * @param {Object} options
+ * @param {Node[] | String} [options.childrenOrText = ''] If provide a string,that will generate a text node as children automatically
+*/
+const generateTableCell = function () {
+  let options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  const {
+    childrenOrText = ''
+  } = options;
+  return (0, _core.generateElement)(_elementTypes.TABLE_CELL, {
+    childrenOrText,
+    props: {}
+  });
+};
+
+/**
+ * @param {Object} options
+ * @param {Node[] | String} [options.childrenOrText = ''] If provide a string,that will generate a text node as children automatically
+ * @param {number | undefined} columnNum If provide a number,that will generate a table row with the number of cells,or will fill the childrenOrText as cells,or will generate a empty cell(if not provide childrenOrText)
+ */
+exports.generateTableCell = generateTableCell;
+const generateTableRow = options => {
+  const {
+    columnNum
+  } = options;
+  let {
+    childrenOrText = ''
+  } = options;
+  let cells = [];
+  if (columnNum) {
+    cells = Array.from({
+      length: columnNum
+    }, () => generateTableCell());
+  } else {
+    // If not type of string,we'll consider it as a cell array,or throw an error
+    if (typeof childrenOrText === 'string') {
+      childrenOrText = [generateTableCell({
+        childrenOrText
+      })];
+    }
+    if (!Array.isArray(childrenOrText)) {
+      throw Error('childrenOrText must be a string or a Node array!');
+    }
+  }
+  return (0, _core.generateElement)(_elementTypes.TABLE_ROW, {
+    childrenOrText: columnNum ? cells : childrenOrText
+  });
+};
+
+/**
+ * @param {Object} options
+ * @param {Node[] | String} [options.childrenOrText = ''] If provide a string,that will generate a text node as children automatically
+ * @param {number | undefined} rowNum If provide a number,that will generate a table with the number of rows,or will fill the childrenOrText as rows,or will generate a empty row(if not provide childrenOrText)
+ * @param {number | undefined} columnNum If provide a number,that will generate a table row with the number of cells,or will fill the childrenOrText as cells,or will generate a empty cell(if not provide childrenOrText)
+ */
+exports.generateTableRow = generateTableRow;
+const generateTable = options => {
+  const {
+    rowNum,
+    columnNum
+  } = options;
+  let {
+    childrenOrText = ''
+  } = options;
+  let rows = [];
+  let align = [];
+  if (rowNum) {
+    align = new Array(columnNum).fill(null);
+    rows = Array.from({
+      length: rowNum
+    }, () => generateTableRow({
+      columnNum
+    }));
+  } else {
+    // If not type of string,we'll consider it as a row array,or throw an error
+    if (typeof childrenOrText === 'string') {
+      childrenOrText = [generateTableRow({
+        childrenOrText
+      })];
+    }
+    if (!Array.isArray(childrenOrText)) {
+      throw Error('childrenOrText must be a string or a Node array!');
+    }
+    const columns = childrenOrText[0].children.length;
+    align = new Array(columns).fill(null);
+  }
+  return (0, _core.generateElement)(_elementTypes.TABLE, {
+    childrenOrText: rowNum ? rows : childrenOrText,
+    props: {
+      align
+    }
+  });
+};
+exports.generateTable = generateTable;

package/dist/extension/plugins/table/plugin.js

@@ -0,0 +1,351 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _slate = require("slate");
+var _isHotkey = _interopRequireDefault(require("is-hotkey"));
+var _helper = require("./helper");
+var _constants = require("../../constants");
+var _setEventTransfer = _interopRequireDefault(require("../../event-transfer/set-event-transfer"));
+var _elementTypes = require("../../constants/element-types");
+var _tableOperations = require("./table-operations");
+var _getEventTransfer = _interopRequireDefault(require("../../event-transfer/get-event-transfer"));
+var _eventBus = _interopRequireDefault(require("../../../utils/event-bus"));
+var _eventTypes = require("../../../constants/event-types");
+var _core = require("../../core");
+/**
+ * @param {Editor} editor
+ */
+const withTable = editor => {
+  const {
+    insertBreak,
+    deleteBackward,
+    onHotKeyDown,
+    insertText,
+    deleteForward,
+    onCopy,
+    insertData,
+    insertFragment,
+    normalizeNode
+  } = editor;
+  const newEditor = editor;
+  newEditor.insertBreak = () => {
+    const isTableActive = (0, _helper.isInTable)(newEditor);
+    if (!editor.selection || !isTableActive) return insertBreak && insertBreak();
+    (0, _tableOperations.insertRow)(newEditor);
+    const [nodeEntry] = _slate.Editor.nodes(newEditor, {
+      match: n => _slate.Element.isElement(n) && n.type === _elementTypes.TABLE_ROW
+    });
+    const path = _slate.Path.next(nodeEntry[1]);
+    const firstCellPath = path.concat(0);
+    _slate.Transforms.select(newEditor, firstCellPath);
+    return;
+  };
+  newEditor.insertText = text => {
+    const isTableActive = (0, _helper.isInTable)(newEditor);
+    if (!isTableActive) return insertText && insertText(text);
+    const {
+      selection
+    } = newEditor;
+    // set element by markdown shortcut;
+    if (text === ' ' && selection && _slate.Range.isCollapsed(selection)) {
+      insertText(text);
+      return;
+    }
+    return insertText(text);
+  };
+  newEditor.insertData = data => {
+    const isTableActive = (0, _helper.isInTable)(newEditor);
+    if (!isTableActive) return insertData && insertData(data);
+    const {
+      type
+    } = (0, _getEventTransfer.default)(data);
+    if (type === 'file') {
+      return insertData(data);
+    }
+    return (0, _helper.pasteContentIntoTable)(newEditor, data);
+  };
+  newEditor.insertFragment = fragment => {
+    const isTableActive = (0, _helper.isInTable)(newEditor);
+    if (!isTableActive) return insertFragment && insertFragment(fragment);
+    if (!Array.isArray(fragment)) return;
+    const firstChild = fragment[0];
+    if (fragment.length === 1 && firstChild.type === _elementTypes.TABLE) {
+      const {
+        tableEntry,
+        rowEntry
+      } = (0, _helper.getTableFocusingInfos)(editor);
+      let selectedInfo = (0, _helper.getSelectGrid)(editor);
+      if (!selectedInfo) {
+        const tableCellEntry = (0, _core.getSelectedNodeEntryByType)(editor, _elementTypes.TABLE_CELL);
+        if (!tableCellEntry) return;
+        const [, path] = tableCellEntry;
+        const startColIndex = path.pop();
+        const startRowIndex = path.pop();
+        selectedInfo = {
+          startRowIndex,
+          startColIndex
+        };
+      }
+      const {
+        startRowIndex,
+        startColIndex
+      } = selectedInfo;
+      const [tableNode, tablePath] = tableEntry;
+      const [rowNode] = rowEntry;
+      const tableWidth = rowNode.children.length;
+      const tableHeight = tableNode.children.length;
+      firstChild.children.forEach((clipRow, clipRowIndex) => {
+        // Out of table
+        if (startRowIndex + clipRowIndex >= tableHeight) return true;
+
+        // rowPath = [...tablePath, rowIndex + clipRowIndex];
+        const currentRowPath = [...tablePath, startRowIndex + clipRowIndex];
+        clipRow.children.forEach((clipCol, clipColIndex) => {
+          // Out of table
+          if (startColIndex + clipColIndex >= tableWidth) return true;
+
+          // cellPath = [...rowPath, columnIndex + clipColIndex];
+          const currentCellPath = [...currentRowPath, startColIndex + clipColIndex];
+          const currentCellChildPath = currentCellPath.concat(0);
+          _slate.Transforms.removeNodes(editor, {
+            at: currentCellChildPath
+          });
+          const otherBlockTypes = [..._constants.HEADERS, _elementTypes.CHECK_LIST_ITEM, _elementTypes.PARAGRAPH];
+          const newChildren = clipCol.children.map(item => {
+            if (otherBlockTypes.includes(item.type)) return item.children;
+            return item;
+          }).flat();
+          _slate.Transforms.insertNodes(editor, newChildren, {
+            at: currentCellChildPath
+          });
+          return false;
+        });
+        return false;
+      });
+      return;
+    }
+    const notSupportTypes = [_elementTypes.TABLE, _elementTypes.BLOCKQUOTE, _elementTypes.UNORDERED_LIST, _elementTypes.ORDERED_LIST, _elementTypes.CODE_BLOCK];
+    const isDataValid = fragment.some(item => notSupportTypes.includes(item.type));
+    if (isDataValid) {
+      const strContent = fragment.reduce((ret, item) => {
+        return ret + _slate.Node.string(item);
+      }, '');
+      _slate.Editor.insertText(newEditor, strContent);
+      return;
+    }
+    const otherBlockTypes = [..._constants.HEADERS, _elementTypes.CHECK_LIST_ITEM, _elementTypes.PARAGRAPH];
+    const newChildren = fragment.map(item => {
+      if (otherBlockTypes.includes(item.type)) return item.children;
+      return item;
+    }).flat();
+    insertFragment(newChildren);
+  };
+  newEditor.deleteBackward = unit => {
+    const isTableActive = (0, _helper.isInTable)(newEditor);
+    if (!isTableActive) return deleteBackward(unit);
+    const {
+      selection
+    } = newEditor;
+    // If select range,prevent to delete
+    if (!_slate.Range.isRange(selection)) return;
+    const [tableCellEntry] = _slate.Editor.nodes(editor, {
+      match: node => node.type === _elementTypes.TABLE_CELL,
+      mode: 'lowest'
+    });
+    // If delete empty cell,prevent to delete
+    const isStartOfCellText = _slate.Editor.isStart(newEditor, selection.anchor, tableCellEntry[1]);
+    if (isStartOfCellText) return;
+    return deleteBackward && deleteBackward(unit);
+  };
+  newEditor.deleteForward = unit => {
+    const isTableActive = (0, _helper.isInTable)(newEditor);
+    if (!isTableActive) return deleteForward(unit);
+    const {
+      selection
+    } = newEditor;
+    // If select range,prevent to delete
+    if (!_slate.Range.isRange(selection)) return;
+    const [tableCellEntry] = _slate.Editor.nodes(editor, {
+      match: node => node.type === _elementTypes.TABLE_CELL,
+      mode: 'lowest'
+    });
+    // If delete empty cell,prevent to delete
+    const isEndOfCellText = _slate.Editor.isEnd(newEditor, selection.anchor, tableCellEntry[1]);
+    if (isEndOfCellText) return;
+    return deleteForward(unit);
+  };
+  newEditor.onHotKeyDown = event => {
+    if (!(0, _helper.isInTable)(newEditor)) return onHotKeyDown && onHotKeyDown(event);
+    if ((0, _isHotkey.default)('tab', event)) {
+      if (newEditor.hasMovedSelection) event.stopPropagation();
+      event.preventDefault();
+      const {
+        tableEntry: [tableNode],
+        rowEntry: [rowNode],
+        columnIndex,
+        rowIndex
+      } = (0, _helper.getTableFocusingInfos)(newEditor);
+      let nextColumnIndex;
+      let nextRowIndex;
+      // If focus not at end of columns
+      if (columnIndex < rowNode.children.length - 1) {
+        nextColumnIndex = columnIndex + 1;
+        nextRowIndex = rowIndex;
+      } else {
+        // If focus not at end of rows,add new row
+        const shouldAddNewRow = rowIndex === tableNode.children.length - 1;
+        nextColumnIndex = 0;
+        nextRowIndex = rowIndex + 1;
+        shouldAddNewRow && (0, _tableOperations.insertRow)(newEditor, _constants.INSERT_POSITION.AFTER);
+      }
+      (0, _helper.selectCellByGrid)(newEditor, nextRowIndex, nextColumnIndex);
+      return true;
+    }
+    if ((0, _isHotkey.default)('shift+tab', event)) {
+      if (newEditor.hasMovedSelection) event.stopPropagation();
+      event.preventDefault();
+      const {
+        rowEntry: [rowNode],
+        columnIndex,
+        rowIndex
+      } = (0, _helper.getTableFocusingInfos)(newEditor);
+      let previousColumnIndex;
+      let previousRowIndex;
+      // If focus not at start of columns
+      if (columnIndex > 0) {
+        previousRowIndex = rowIndex;
+        previousColumnIndex = columnIndex - 1;
+      } else {
+        // If focus not at start of rows
+        if (rowIndex > 0) {
+          previousRowIndex = rowIndex - 1;
+          previousColumnIndex = rowNode.children.length - 1;
+        } else {
+          previousRowIndex = 0;
+          previousColumnIndex = 0;
+        }
+      }
+      (0, _helper.selectCellByGrid)(newEditor, previousRowIndex, previousColumnIndex);
+      return true;
+    }
+    if ((0, _isHotkey.default)('mod+enter', event) || (0, _isHotkey.default)('shift+enter', event)) {
+      event.preventDefault();
+      (0, _helper.jumpOutTableInEditor)(newEditor);
+      return true;
+    }
+    if ((0, _isHotkey.default)('mod+a', event)) {
+      event.preventDefault();
+      const {
+        tableEntry: [tableNode],
+        rowEntry: [rowNode]
+      } = (0, _helper.getTableFocusingInfos)(newEditor);
+      const rowCount = tableNode.children.length;
+      const colCount = rowNode.children.length;
+      (0, _helper.selectCellByGrid)(newEditor, rowCount - 1, colCount - 1);
+      const eventBus = _eventBus.default.getInstance();
+      eventBus.dispatch(_eventTypes.INTERNAL_EVENTS.ON_SELECT_ALL_CELL, tableNode.id);
+      return true;
+    }
+    if ((0, _isHotkey.default)('delete', event) || (0, _isHotkey.default)('backspace', event)) {
+      const selectedInfo = (0, _helper.getSelectGrid)(newEditor);
+      if (!selectedInfo) return onHotKeyDown && onHotKeyDown(event);
+      const {
+        startRowIndex,
+        endRowIndex,
+        startColIndex,
+        endColIndex
+      } = selectedInfo;
+      if (startRowIndex === -1 || endRowIndex === -1 || startColIndex === -1 || endColIndex === -1) return;
+      const [tableEntry] = (0, _helper.getTableEntry)(newEditor);
+      const [, tablePath] = tableEntry;
+      for (let rowIndex = startRowIndex; rowIndex <= endRowIndex; rowIndex++) {
+        for (let colIndex = startColIndex; colIndex <= endColIndex; colIndex++) {
+          _slate.Transforms.insertText(newEditor, '', {
+            at: tablePath.concat(rowIndex, colIndex)
+          });
+        }
+      }
+      return true;
+    }
+    return onHotKeyDown && onHotKeyDown(event);
+  };
+  newEditor.onCopy = event => {
+    if (!(0, _helper.isInTable)(newEditor)) {
+      return onCopy && onCopy(event);
+    }
+    event.preventDefault();
+    event.stopPropagation();
+    // selected multiple cells
+    const tableNode = (0, _helper.getSelectedTableCells)(newEditor);
+    if (tableNode) {
+      (0, _setEventTransfer.default)(event, 'fragment', tableNode);
+      return true;
+    }
+    // selected only one cell
+    const tableCell = (0, _core.getSelectedNodeByType)(newEditor, _elementTypes.TABLE_CELL);
+    if (tableCell) {
+      const selection = window.getSelection();
+      const selectedText = selection.toString();
+      const range = selection.getRangeAt(0);
+      const selectedContent = range.cloneContents();
+      const div = document.createElement('div');
+      // Unwrap image wrapper
+      selectedContent.childNodes.forEach(node => {
+        if (node.classList && node.classList.contains('sea-email-image-wrapper')) {
+          const img = node.querySelector('img');
+          div.appendChild(img.cloneNode(true));
+          return;
+        }
+        div.appendChild(node.cloneNode(true));
+      });
+      (0, _setEventTransfer.default)(event, 'text', selectedText);
+      (0, _setEventTransfer.default)(event, 'html', div.innerHTML.toString());
+      return true;
+    }
+    return false;
+  };
+  newEditor.normalizeNode = _ref => {
+    let [node, path] = _ref;
+    if (node.type === _elementTypes.TABLE) {
+      const isLast = (0, _core.isLastNode)(newEditor, node);
+      if (isLast) {
+        const paragraph = (0, _core.generateEmptyElement)(_elementTypes.PARAGRAPH);
+        _slate.Transforms.insertNodes(newEditor, paragraph, {
+          at: [path[0] + 1]
+        });
+      }
+      const isFirst = (0, _core.isFirstNode)(newEditor, node);
+      if (isFirst) {
+        const paragraph = (0, _core.generateEmptyElement)(_elementTypes.PARAGRAPH);
+        _slate.Transforms.insertNodes(newEditor, paragraph, {
+          at: [path[0]]
+        });
+      }
+    }
+    if (node.type === _elementTypes.TABLE_ROW) {
+      const parentEntry = _slate.Editor.parent(editor, path);
+      if ((parentEntry === null || parentEntry === void 0 ? void 0 : parentEntry[0].type) !== _elementTypes.TABLE) {
+        (0, _slate.unwrapNodes)(editor, {
+          at: path
+        });
+        return;
+      }
+    }
+    if (node.type === _elementTypes.TABLE_CELL) {
+      const parentEntry = _slate.Editor.parent(editor, path);
+      if ((parentEntry === null || parentEntry === void 0 ? void 0 : parentEntry[0].type) !== _elementTypes.TABLE_ROW) {
+        (0, _slate.unwrapNodes)(editor, {
+          at: path
+        });
+        return;
+      }
+    }
+    return normalizeNode([node, path]);
+  };
+  return newEditor;
+};
+var _default = exports.default = withTable;

package/dist/extension/plugins/table/render-elem/index.css

@@ -0,0 +1,64 @@
+.sea-email-table-container td {
+  position: relative;
+}
+
+.sea-email-table-container tr:nth-child(odd) {
+  background-color: #f8f8f8;
+}
+
+.sea-email-table-container tr:first-child {
+  font-weight: 500;
+}
+
+.sea-email-table-container .selected-cell {
+  caret-color: transparent;
+  background-color: #fff4e6;
+}
+
+.sea-email-table-container .selected-cell-top:before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  margin: -1px;
+  border-top: 1px double #ffa94d;
+  z-index: 2;
+}
+
+.sea-email-table-container .selected-cell-bottom:before {
+  content: "";
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  margin: -1px;
+  border-bottom: 1px double #ffa94d;
+  z-index: 2;
+}
+
+.sea-email-table-container .selected-cell-left:before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  margin: -1px;
+  border-left: 1px double #ffa94d;
+  z-index: 2;
+}
+
+.sea-email-table-container .selected-cell-right:before {
+  content: "";
+  position: absolute;
+  top: 0;
+  right: 0;
+  left: 0;
+  bottom: 0;
+  margin: -1px;
+  border-right: 1px double #ffa94d;
+  z-index: 2;
+}