@seafile/sdoc-editor 2.0.82 → 2.0.83

package/dist/extension/plugins/mention/render-elem/participant-popover.js

@@ -0,0 +1,246 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard")["default"];
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _slate = require("@seafile/slate");
+var _constants = require("../../../../comment/constants");
+var _useParticipants = require("../../../../comment/hooks/use-participants");
+var _utils = require("../../../../comment/utils");
+var _constants2 = require("../../../../constants");
+var _useCollaborators2 = require("../../../../hooks/use-collaborators");
+var _eventBus = _interopRequireDefault(require("../../../../utils/event-bus"));
+var _mouseEvent = require("../../../../utils/mouse-event");
+var _commons = require("../../../commons");
+var _core = require("../../../core");
+var _helper = require("../helper");
+var _commentParticipantItem = _interopRequireDefault(require("./comment-participant-item"));
+require("./index.css");
+var ParticipantPopover = function ParticipantPopover(_ref) {
+  var editor = _ref.editor,
+    searchText = _ref.searchText;
+  var collaboratorsPopoverRef = (0, _react.useRef)(null);
+  var _useCollaborators = (0, _useCollaborators2.useCollaborators)(),
+    collaborators = _useCollaborators.collaborators;
+  var _useParticipantsConte = (0, _useParticipants.useParticipantsContext)(),
+    addParticipants = _useParticipantsConte.addParticipants,
+    participants = _useParticipantsConte.participants;
+  var _useState = (0, _react.useState)([]),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    searchedCollaborators = _useState2[0],
+    setSearchedCollaborators = _useState2[1];
+  var _useState3 = (0, _react.useState)(-1),
+    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+    activeCollaboratorIndex = _useState4[0],
+    setActiveCollaboratorIndex = _useState4[1];
+  var _useState5 = (0, _react.useState)([]),
+    _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
+    validCollaborators = _useState6[0],
+    setValidCollaborators = _useState6[1];
+  (0, _react.useEffect)(function () {
+    var sortedCollaborators = (0, _helper.sortCollaborators)(collaborators, participants);
+    setValidCollaborators(sortedCollaborators);
+  }, [collaborators, participants]);
+  (0, _react.useEffect)(function () {
+    return function () {
+      (0, _helper.transformToText)(editor);
+    };
+  }, [editor]);
+  var hideCommentPopover = (0, _react.useCallback)(function () {
+    if (searchedCollaborators.length === 0) return;
+    setSearchedCollaborators([]);
+    setActiveCollaboratorIndex(-1);
+  }, [searchedCollaborators]);
+  var handleForceClickPopover = (0, _react.useCallback)(function (event) {
+    var _collaboratorsPopover;
+    if (!((_collaboratorsPopover = collaboratorsPopoverRef.current) !== null && _collaboratorsPopover !== void 0 && _collaboratorsPopover.contains(event.target))) {
+      (0, _helper.transformToText)(editor);
+    }
+  }, [editor]);
+
+  // onMount: handleCommentPopover
+  (0, _react.useEffect)(function () {
+    document.addEventListener('mousedown', handleForceClickPopover);
+    return function () {
+      document.removeEventListener('mousedown', handleForceClickPopover);
+    };
+  }, [handleForceClickPopover]);
+  var setScrollTop = (0, _react.useCallback)(function (offsetTop, itemOffsetHeight, mouseDownType) {
+    var _collaboratorsPopover2 = collaboratorsPopoverRef.current,
+      offsetHeight = _collaboratorsPopover2.offsetHeight,
+      scrollTop = _collaboratorsPopover2.scrollTop;
+    if (mouseDownType === _constants.DOWN) {
+      if (offsetTop + itemOffsetHeight - scrollTop - offsetHeight + _constants.POPOVER_ADDING_HEIGHT > 0) {
+        var top = offsetTop + itemOffsetHeight - offsetHeight + _constants.POPOVER_ADDING_HEIGHT;
+        collaboratorsPopoverRef.current.scrollTop = top;
+      }
+    }
+    if (mouseDownType === _constants.UP) {
+      if (offsetTop < scrollTop) {
+        collaboratorsPopoverRef.current.scrollTop = offsetTop - _constants.POPOVER_ADDING_HEIGHT;
+      }
+    }
+  }, []);
+  var setCollaboratorsPopoverPosition = (0, _react.useCallback)(function (caretPosition) {
+    if (!collaboratorsPopoverRef.current) return;
+    var _collaboratorsPopover3 = collaboratorsPopoverRef.current.getBoundingClientRect(),
+      height = _collaboratorsPopover3.height,
+      width = _collaboratorsPopover3.width;
+    var offsetHeight = collaboratorsPopoverRef.current.offsetHeight;
+
+    // Whether the vertical direction exceeds the screen
+    var isVerticalDirectionBeyondScreen = height + caretPosition.y + _constants.LINE_HEIGHT > window.innerHeight;
+
+    // if the vertical direction exceeds the screen, collaboratorsPopoverRef appear above the cursor
+    var top = isVerticalDirectionBeyondScreen ? "".concat(caretPosition.y - offsetHeight + _constants.LINE_HEIGHT, "px") : "".concat(caretPosition.y + _constants.LINE_HEIGHT, "px");
+    collaboratorsPopoverRef.current.style.top = top;
+
+    // Whether the horizontal direction exceeds the screen
+    var isHorizontalDirectionBeyondScreen = caretPosition.x + _constants.FONT_SIZE_WIDTH + width > window.innerWidth;
+
+    // if the horizontal direction exceeds the screen, collaboratorsPopoverRef is displayed against the right side of the screen
+    var left = isHorizontalDirectionBeyondScreen ? "".concat(window.innerWidth - width, "px") : "".concat(caretPosition.x + _constants.FONT_SIZE_WIDTH, "px");
+    collaboratorsPopoverRef.current.style.left = left;
+  }, [collaboratorsPopoverRef]);
+  var getSearchedCollaborators = (0, _react.useCallback)(function (searchingText) {
+    if (!searchingText.length) return validCollaborators;
+    if (searchingText) return (0, _utils.searchCollaborators)(validCollaborators, searchingText, editor);
+    return [];
+  }, [editor, validCollaborators]);
+  var handleInvolvedKeyUp = (0, _react.useCallback)(function () {
+    var searchedCollaborators = getSearchedCollaborators(searchText);
+    if (searchedCollaborators.length === 0) {
+      hideCommentPopover();
+      return;
+    }
+    setActiveCollaboratorIndex(0);
+    setSearchedCollaborators(searchedCollaborators);
+    setTimeout(function () {
+      var caretPosition = (0, _helper.getSelectionCoords)();
+      setCollaboratorsPopoverPosition(caretPosition);
+    }, 1);
+  }, [getSearchedCollaborators, searchText, hideCommentPopover, setCollaboratorsPopoverPosition]);
+  var handleSelectingCollaborator = (0, _react.useCallback)(function (event, direction) {
+    (0, _mouseEvent.eventStopPropagation)(event);
+    var collaboratorsLen = searchedCollaborators.length;
+    if (collaboratorsLen === 0) return;
+    var nextActiveCollaboratorIndex = activeCollaboratorIndex;
+    if (direction === _constants.DOWN) {
+      nextActiveCollaboratorIndex++;
+      if (nextActiveCollaboratorIndex >= collaboratorsLen) {
+        nextActiveCollaboratorIndex = 0;
+      }
+    } else {
+      nextActiveCollaboratorIndex--;
+      if (nextActiveCollaboratorIndex < 0) {
+        nextActiveCollaboratorIndex = collaboratorsLen - 1;
+      }
+    }
+    setActiveCollaboratorIndex(nextActiveCollaboratorIndex);
+  }, [searchedCollaborators, activeCollaboratorIndex]);
+  var onSelectCollaborator = (0, _react.useCallback)(function (collaborator) {
+    var _getMentionTempIptEnt = (0, _helper.getMentionTempIptEntry)(editor),
+      _getMentionTempIptEnt2 = (0, _slicedToArray2["default"])(_getMentionTempIptEnt, 2),
+      path = _getMentionTempIptEnt2[1];
+    (0, _helper.insertMention)(editor, collaborator);
+    addParticipants(collaborator.username);
+    _slate.Transforms.removeNodes(editor, {
+      at: path
+    });
+    var focusPath = _slate.Editor.next(editor, {
+      at: path
+    })[1];
+    (0, _core.focusEditor)(editor, _slate.Editor.start(editor, focusPath));
+    hideCommentPopover();
+  }, [editor, hideCommentPopover, addParticipants]);
+  var handleSelectCollaborator = (0, _react.useCallback)(function (event) {
+    if (searchedCollaborators.length === 0) return;
+    onSelectCollaborator(searchedCollaborators[activeCollaboratorIndex]);
+  }, [searchedCollaborators, activeCollaboratorIndex, onSelectCollaborator]);
+  var handleMentionChosen = (0, _react.useCallback)(function (_ref2) {
+    var event = _ref2.event;
+    if (event.keyCode === _constants2.KeyCodes.DownArrow) {
+      handleSelectingCollaborator(event, _constants.DOWN);
+      return;
+    }
+    if (event.keyCode === _constants2.KeyCodes.UpArrow) {
+      handleSelectingCollaborator(event, _constants.UP);
+      return;
+    }
+    if (event.keyCode === _constants2.KeyCodes.Enter) {
+      if (searchedCollaborators.length > 0) {
+        handleSelectCollaborator();
+        event.preventDefault();
+        event.stopPropagation();
+      } else {
+        (0, _helper.transformToText)(editor);
+      }
+      return;
+    }
+    if (event.keyCode === _constants2.KeyCodes.Esc) {
+      (0, _helper.transformToText)(editor);
+      return;
+    }
+    handleInvolvedKeyUp(event);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [editor, handleInvolvedKeyUp, handleSelectCollaborator, handleSelectingCollaborator]);
+
+  // Add the Enter keydown event listener during the capture phase
+  (0, _react.useEffect)(function () {
+    var handleKeydownCapture = function handleKeydownCapture(event) {
+      if (event.keyCode === _constants2.KeyCodes.Enter) {
+        handleMentionChosen({
+          event: event
+        });
+      }
+    };
+    document.addEventListener('keydown', handleKeydownCapture, true);
+    return function () {
+      document.removeEventListener('keydown', handleKeydownCapture, true);
+    };
+  }, [handleMentionChosen]);
+  var handleSearchTextChange = (0, _react.useCallback)(function () {
+    var newCollaborators = getSearchedCollaborators(searchText);
+    if (newCollaborators.length === 0) {
+      hideCommentPopover();
+      return;
+    }
+    setSearchedCollaborators(newCollaborators);
+    setTimeout(function () {
+      var caretPosition = (0, _helper.getSelectionCoords)();
+      setCollaboratorsPopoverPosition(caretPosition);
+    }, 1);
+  }, [getSearchedCollaborators, hideCommentPopover, searchText, setCollaboratorsPopoverPosition]);
+  (0, _react.useEffect)(function () {
+    handleSearchTextChange();
+    setActiveCollaboratorIndex(0);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [searchText, validCollaborators]);
+  (0, _react.useEffect)(function () {
+    var eventBus = _eventBus["default"].getInstance();
+    var unsubscribe = eventBus.subscribe(_constants2.INTERNAL_EVENT.HANDLE_MENTION_TEMP_CHOSEN, handleMentionChosen);
+    return function () {
+      unsubscribe();
+    };
+  }, [handleMentionChosen, searchText, validCollaborators]);
+  if (searchedCollaborators.length === 0) return null;
+  return /*#__PURE__*/_react["default"].createElement(_commons.ElementPopover, null, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "sdoc-comment-caret-list",
+    ref: collaboratorsPopoverRef
+  }, searchedCollaborators.map(function (participant, index) {
+    return /*#__PURE__*/_react["default"].createElement(_commentParticipantItem["default"], {
+      key: participant.username,
+      participantIndex: index,
+      activeParticipantIndex: activeCollaboratorIndex,
+      participant: participant,
+      setScrollTop: setScrollTop,
+      onSelectParticipant: onSelectCollaborator
+    });
+  })));
+};
+var _default = exports["default"] = ParticipantPopover;

package/dist/extension/plugins/multi-column/constants/index.js

@@ -0,0 +1,7 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.COLUMN_MIN_WIDTH = void 0;
+var COLUMN_MIN_WIDTH = exports.COLUMN_MIN_WIDTH = 80;

package/dist/extension/plugins/multi-column/helper.js

@@ -0,0 +1,208 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.updateColumnWidthOnDeletion = exports.updateColumnWidth = exports.insertMultiColumn = exports.hasImageInColumn = exports.handleInsertMultiColumn = exports.getCurrentPageWidth = exports.generateEmptyMultiColumn = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+var _createForOfIteratorHelper2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/createForOfIteratorHelper"));
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+var _slate = require("@seafile/slate");
+var _slateReact = require("@seafile/slate-react");
+var _slugid = _interopRequireDefault(require("slugid"));
+var _constants = require("../../../constants");
+var _fullWidthMode = require("../../../utils/full-width-mode");
+var _localStorageUtils = _interopRequireDefault(require("../../../utils/local-storage-utils"));
+var _constants2 = require("../../constants");
+var _core = require("../../core");
+var _constants3 = require("./constants");
+var insertMultiColumn = exports.insertMultiColumn = function insertMultiColumn(editor, selection) {
+  var position = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : _constants2.INSERT_POSITION.CURRENT;
+  var type = arguments.length > 3 ? arguments[3] : undefined;
+  var multiColumnNode = generateEmptyMultiColumn(editor, type);
+  var validSelection = selection || editor.selection;
+  var path = _slate.Editor.path(editor, validSelection);
+  handleInsertMultiColumn(editor, position, path, multiColumnNode);
+};
+var generateEmptyMultiColumn = exports.generateEmptyMultiColumn = function generateEmptyMultiColumn(editor, MultiColumnType) {
+  var columnNodes = [];
+  var column = [];
+  var multiColumnNumber;
+  switch (MultiColumnType) {
+    case _constants2.ELEMENT_TYPE.TWO_COLUMN:
+      multiColumnNumber = 2;
+      break;
+    case _constants2.ELEMENT_TYPE.THREE_COLUMN:
+      multiColumnNumber = 3;
+      break;
+    case _constants2.ELEMENT_TYPE.FOUR_COLUMN:
+      multiColumnNumber = 4;
+      break;
+    case _constants2.ELEMENT_TYPE.FIVE_COLUMN:
+      multiColumnNumber = 5;
+      break;
+    default:
+      break;
+  }
+  var currentPageWidth = getCurrentPageWidth(editor);
+  var initialColumnWidth = Math.max(_constants3.COLUMN_MIN_WIDTH, parseInt(currentPageWidth / multiColumnNumber));
+  var _loop = function _loop() {
+    var columnWidthKey = _slugid["default"].nice();
+    column.push({
+      key: columnWidthKey,
+      width: initialColumnWidth
+    });
+    var columnWidth = column.find(function (col) {
+      return col.key === columnWidthKey;
+    }).width;
+    columnNodes.push({
+      id: columnWidthKey,
+      type: _constants2.ELEMENT_TYPE.COLUMN,
+      width: columnWidth,
+      children: [{
+        id: _slugid["default"].nice(),
+        type: _constants2.PARAGRAPH,
+        children: [{
+          text: '',
+          id: _slugid["default"].nice()
+        }]
+      }]
+    });
+  };
+  for (var i = 0; i < multiColumnNumber; i++) {
+    _loop();
+  }
+  return {
+    id: _slugid["default"].nice(),
+    type: _constants2.ELEMENT_TYPE.MULTI_COLUMN,
+    children: columnNodes,
+    column: column,
+    style: {
+      gridTemplateColumns: "repeat(".concat(multiColumnNumber, ", ").concat(initialColumnWidth, "px)")
+    }
+  };
+};
+var updateColumnWidth = exports.updateColumnWidth = function updateColumnWidth(editor, element, column, newPath) {
+  var path = (0, _core.findPath)(editor, element, newPath);
+  var gridTemplateColumns = column.map(function (column) {
+    return "".concat(column.width, "px");
+  }).join(' ');
+  _slate.Transforms.setNodes(editor, {
+    column: column,
+    style: {
+      gridTemplateColumns: gridTemplateColumns
+    }
+  }, {
+    at: path
+  });
+};
+var handleInsertMultiColumn = exports.handleInsertMultiColumn = function handleInsertMultiColumn(editor, insertPosition, path, multiColumnNode) {
+  var selection = editor.selection;
+  if (!selection) return;
+  var insertPath;
+  if (insertPosition === _constants2.INSERT_POSITION.BEFORE) {
+    insertPath = [path[0]];
+    _slate.Transforms.insertNodes(editor, multiColumnNode, {
+      at: insertPath
+    });
+  } else if (insertPosition === _constants2.INSERT_POSITION.AFTER) {
+    insertPath = [path[0] + 1];
+    _slate.Transforms.insertNodes(editor, multiColumnNode, {
+      at: insertPath
+    });
+  } else if (insertPosition === _constants2.INSERT_POSITION.CURRENT) {
+    // Insert a new multi_column on the next line if insertion operation happens in existed multi_column
+    var currentMultiColumnEntry = (0, _core.getSelectedNodeEntryByType)(editor, _constants2.ELEMENT_TYPE.MULTI_COLUMN);
+    if (currentMultiColumnEntry) {
+      _slate.Transforms.splitNodes(editor, {
+        at: selection
+      });
+      insertPath = [selection.anchor.path[0] + 1];
+      _slate.Transforms.insertNodes(editor, multiColumnNode, {
+        at: insertPath
+      });
+    }
+    // If there are multiple children in the editor, insert the new multi-column node at the current selection
+    if (editor.children.length !== 1 && !currentMultiColumnEntry) {
+      _slate.Transforms.insertNodes(editor, multiColumnNode, {
+        at: selection
+      });
+      _slate.Transforms.removeNodes(editor, {
+        at: [path[0]]
+      });
+    }
+    // If there is only one children in the editor, insert the new multi-column node at the next line
+    if (editor.children.length === 1 && !currentMultiColumnEntry) {
+      _slate.Transforms.splitNodes(editor, {
+        at: selection
+      });
+      _slate.Transforms.insertNodes(editor, multiColumnNode, {
+        at: selection
+      });
+      insertPath = [selection.anchor.path[0] + 1];
+    }
+  }
+  _slate.Transforms.select(editor, _slate.Editor.start(editor, insertPath));
+  _slateReact.ReactEditor.focus(editor);
+};
+var updateColumnWidthOnDeletion = exports.updateColumnWidthOnDeletion = function updateColumnWidthOnDeletion(editor, selection, column, deletionDirection) {
+  var isDragged = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : false;
+  var multiColumnPath = !isDragged ? [selection.anchor.path[0]] : [selection[0]];
+  var newMultiColumnNode = _slate.Node.get(editor, multiColumnPath);
+  var targetColumnIndex = !isDragged ? selection.anchor.path[1] + (deletionDirection === 'deleteForward' ? 1 : 0) : selection[1] + (deletionDirection === 'deleteForward' ? 1 : 0);
+  var remainingColumn = column.filter(function (_, index) {
+    return index !== targetColumnIndex;
+  });
+  var currentPageWidth = getCurrentPageWidth(editor);
+  var columnWidth = Math.max(_constants3.COLUMN_MIN_WIDTH, parseInt(currentPageWidth / remainingColumn.length));
+
+  // Recalculate width of every left column
+  var newColumn = remainingColumn.map(function (column, index) {
+    return (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, column), {}, {
+      left: index * columnWidth,
+      width: columnWidth
+    });
+  });
+  updateColumnWidth(editor, newMultiColumnNode, newColumn, multiColumnPath);
+};
+var getCurrentPageWidth = exports.getCurrentPageWidth = function getCurrentPageWidth(editor) {
+  var sdocEditorPage = document.getElementById('sdoc-editor');
+  var pageWidth;
+  pageWidth = sdocEditorPage === null || sdocEditorPage === void 0 ? void 0 : sdocEditorPage.getBoundingClientRect().width;
+
+  // Get pageWidth if on is_full_width mode
+  if (_localStorageUtils["default"].getItem(_constants.FULL_WIDTH_MODE)) {
+    var _getStyleByFullWidthM;
+    var sdocEditorPageContent = document.getElementsByClassName('sdoc-editor-page-content')[0];
+    var pageContentWidth = sdocEditorPageContent === null || sdocEditorPageContent === void 0 ? void 0 : sdocEditorPageContent.getBoundingClientRect().width;
+    var pageWidthString = (_getStyleByFullWidthM = (0, _fullWidthMode.getStyleByFullWidthMode)(undefined, editor)) === null || _getStyleByFullWidthM === void 0 ? void 0 : _getStyleByFullWidthM.width;
+    var numbers = pageWidthString.match(/\d+/g).map(Number);
+
+    // 120 is padding and 2 is border width of 'sdoc-editor' dom;
+    pageWidth = pageContentWidth - numbers.slice(1).reduce(function (sum, num) {
+      return sum + num;
+    }, 0) - 120 - 2;
+  }
+  return pageWidth;
+};
+var hasImageInColumn = exports.hasImageInColumn = function hasImageInColumn(editor, columnPath) {
+  var _iterator = (0, _createForOfIteratorHelper2["default"])(_slate.Editor.nodes(editor, {
+      at: columnPath
+    })),
+    _step;
+  try {
+    for (_iterator.s(); !(_step = _iterator.n()).done;) {
+      var _step$value = (0, _slicedToArray2["default"])(_step.value, 1),
+        node = _step$value[0];
+      if ([_constants2.IMAGE_BLOCK, _constants2.IMAGE].includes(node === null || node === void 0 ? void 0 : node.type)) {
+        return true;
+      }
+    }
+  } catch (err) {
+    _iterator.e(err);
+  } finally {
+    _iterator.f();
+  }
+  return false;
+};

package/dist/extension/plugins/multi-column/index.js

@@ -0,0 +1,17 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _constants = require("../../constants");
+var _plugin = _interopRequireDefault(require("./plugin"));
+var _renderElem = require("./render-elem");
+var MultiColumnPlugin = {
+  type: _constants.MULTI_COLUMN,
+  nodeType: 'element',
+  editorPlugin: _plugin["default"],
+  renderElements: [_renderElem.renderMultiColumn, _renderElem.renderColumn]
+};
+var _default = exports["default"] = MultiColumnPlugin;

package/dist/extension/plugins/multi-column/plugin.js

@@ -0,0 +1,149 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+var _slate = require("@seafile/slate");
+var _constants = require("../../constants");
+var _core = require("../../core");
+var _unwrapList = require("../list/transforms/unwrap-list");
+var _helper = require("./helper");
+var withMultiColumn = function withMultiColumn(editor) {
+  var normalizeNode = editor.normalizeNode,
+    deleteBackward = editor.deleteBackward,
+    deleteForward = editor.deleteForward;
+  var newEditor = editor;
+  newEditor.normalizeNode = function (_ref) {
+    var _ref2 = (0, _slicedToArray2["default"])(_ref, 2),
+      node = _ref2[0],
+      path = _ref2[1];
+    var type = (0, _core.getNodeType)(node);
+    if (node.type === _constants.ELEMENT_TYPE.COLUMN) {
+      var parentEntry = _slate.Editor.parent(newEditor, path);
+      if (parentEntry && parentEntry[0].type !== _constants.ELEMENT_TYPE.MULTI_COLUMN) {
+        _slate.Transforms.unwrapNodes(newEditor, {
+          at: path
+        });
+        return;
+      }
+    }
+    if (type !== _constants.ELEMENT_TYPE.MULTI_COLUMN) {
+      return normalizeNode([node, path]);
+    }
+
+    // Insert empty node，continue newEditor
+    var isLast = (0, _core.isLastNode)(newEditor, node);
+    if (isLast) {
+      var p = (0, _core.generateEmptyElement)(_constants.ELEMENT_TYPE.PARAGRAPH);
+      _slate.Transforms.insertNodes(newEditor, p, {
+        at: [path[0] + 1]
+      });
+    }
+  };
+  newEditor.deleteBackward = function (unit) {
+    var selection = editor.selection;
+    if (!selection) return;
+    var currentMultiColumnEntry = (0, _core.getSelectedNodeEntryByType)(editor, _constants.ELEMENT_TYPE.MULTI_COLUMN);
+    if (!currentMultiColumnEntry) return deleteBackward(unit);
+    var _currentMultiColumnEn = currentMultiColumnEntry[0],
+      column = _currentMultiColumnEn.column,
+      childColumn = _currentMultiColumnEn.children;
+    var currentColumnEntry = (0, _core.getSelectedNodeEntryByType)(editor, _constants.ELEMENT_TYPE.COLUMN);
+    var isOnlyOneChild = currentColumnEntry[0].children.length === 1;
+    var isAtStart = _slate.Editor.isStart(editor, selection.focus, selection.anchor.path.slice(0, 2));
+    var currentNodeInColumn = currentColumnEntry[0].children[0];
+    var currentNodePathInColumn = (0, _core.findPath)(editor, currentNodeInColumn);
+    // Only one child inline-image in current column
+    // Return if cursor is at the start of only one child image
+    if (isOnlyOneChild && currentNodeInColumn.children.length === 3) {
+      var isImageType = currentNodeInColumn.children[1].type === _constants.IMAGE;
+      if (isImageType && selection.anchor.path[3] === 0 && selection.anchor.offset === 0) {
+        return;
+      }
+    }
+
+    // When selection is at start of the only one existed child nodes in current column node, delete column node
+    if (isOnlyOneChild && isAtStart) {
+      // Transform non-paragraph elements without callout element to paragraph elements
+      if (currentNodeInColumn.type !== _constants.PARAGRAPH) {
+        var _currentNodeInColumn$;
+        // Unwrap list if list-item exists in the current column node
+        if ([_constants.UNORDERED_LIST, _constants.ORDERED_LIST].includes(currentNodeInColumn.type)) {
+          (0, _unwrapList.unwrapList)(editor);
+          return;
+        }
+        if ([_constants.UNORDERED_LIST, _constants.ORDERED_LIST].includes(currentNodeInColumn === null || currentNodeInColumn === void 0 ? void 0 : (_currentNodeInColumn$ = currentNodeInColumn.children[0]) === null || _currentNodeInColumn$ === void 0 ? void 0 : _currentNodeInColumn$.type)) {
+          _slate.Transforms.unwrapNodes(editor, {
+            at: currentNodePathInColumn
+          });
+        } else {
+          _slate.Transforms.setNodes(editor, {
+            type: _constants.PARAGRAPH
+          }, {
+            at: currentNodePathInColumn
+          });
+        }
+        return;
+      }
+
+      // Delete multi_column and column wrap when only one child column node exists
+      if (childColumn.length <= 2) {
+        deleteBackward();
+        _slate.Transforms.unwrapNodes(editor, {
+          at: [selection.anchor.path[0]]
+        });
+        return;
+      }
+      // Delete current child column node every time when number of child column node is more than 2
+      if (childColumn.length > 2) {
+        deleteBackward();
+        (0, _helper.updateColumnWidthOnDeletion)(newEditor, selection, column, 'deleteBackward');
+        return;
+      }
+    }
+    deleteBackward(unit);
+  };
+  newEditor.deleteForward = function (unit) {
+    var selection = editor.selection;
+    if (!selection) return;
+    var nextNode = _slate.Editor.next(newEditor);
+    var nextColumnIndex = nextNode[1][1];
+    var currentMultiColumnEntry = (0, _core.getSelectedNodeEntryByType)(editor, _constants.ELEMENT_TYPE.MULTI_COLUMN);
+    if (!currentMultiColumnEntry) return deleteForward(unit);
+    var _currentMultiColumnEn2 = currentMultiColumnEntry[0],
+      column = _currentMultiColumnEn2.column,
+      childColumn = _currentMultiColumnEn2.children;
+    var isOnlyOneChild = childColumn[nextColumnIndex].children.length === 1;
+    var isAtEnd = _slate.Editor.isEnd(editor, selection.focus, selection.anchor.path.slice(0, 2));
+
+    // When deleteForwarding only one child including image or image-block in next column, return
+    var hasImageInOnlyOneChild = isOnlyOneChild && (0, _helper.hasImageInColumn)(editor, nextNode[1].slice(0, 2));
+    if (isOnlyOneChild && isAtEnd && hasImageInOnlyOneChild) {
+      return;
+    }
+
+    // When selection is at end and the only one existed child nodes in next column node, delete column node
+    if (isOnlyOneChild && isAtEnd) {
+      // Delete multi_column and column wrap when only one child column node exists and selection is on the first column node
+      if (childColumn.length === 2 && selection.anchor.path.slice(0, 2)[1] === 0) {
+        deleteForward();
+        _slate.Transforms.unwrapNodes(editor, {
+          at: [selection.anchor.path[0]]
+        });
+        return;
+      }
+      // Delete next child column node every time when number of child column node is more than 2
+      if (childColumn.length > 2) {
+        deleteForward();
+        (0, _helper.updateColumnWidthOnDeletion)(newEditor, selection, column, 'deleteForward');
+        return;
+      }
+    }
+    deleteForward(unit);
+  };
+  return newEditor;
+};
+var _default = exports["default"] = withMultiColumn;