@seafile/comment-editor 0.0.1-alpha.0

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

@@ -0,0 +1,242 @@
+"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 _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 _useCollaborators = 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");
+const ParticipantPopover = _ref => {
+  let {
+    editor,
+    searchText
+  } = _ref;
+  const collaboratorsPopoverRef = (0, _react.useRef)(null);
+  const {
+    collaborators
+  } = (0, _useCollaborators.useCollaborators)();
+  const {
+    addParticipants,
+    participants
+  } = (0, _useParticipants.useParticipantsContext)();
+  const [searchedCollaborators, setSearchedCollaborators] = (0, _react.useState)([]);
+  const [activeCollaboratorIndex, setActiveCollaboratorIndex] = (0, _react.useState)(-1);
+  const [validCollaborators, setValidCollaborators] = (0, _react.useState)([]);
+  (0, _react.useEffect)(() => {
+    const sortedCollaborators = (0, _helper.sortCollaborators)(collaborators, participants);
+    setValidCollaborators(sortedCollaborators);
+  }, [collaborators, participants]);
+  (0, _react.useEffect)(() => {
+    return () => {
+      (0, _helper.transformToText)(editor);
+    };
+  }, [editor]);
+  const hideCommentPopover = (0, _react.useCallback)(() => {
+    if (searchedCollaborators.length === 0) return;
+    setSearchedCollaborators([]);
+    setActiveCollaboratorIndex(-1);
+  }, [searchedCollaborators]);
+  const handleForceClickPopover = (0, _react.useCallback)(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)(() => {
+    document.addEventListener('mousedown', handleForceClickPopover);
+    return () => {
+      document.removeEventListener('mousedown', handleForceClickPopover);
+    };
+  }, [handleForceClickPopover]);
+  const setScrollTop = (0, _react.useCallback)((offsetTop, itemOffsetHeight, mouseDownType) => {
+    const {
+      offsetHeight,
+      scrollTop
+    } = collaboratorsPopoverRef.current;
+    if (mouseDownType === _constants.DOWN) {
+      if (offsetTop + itemOffsetHeight - scrollTop - offsetHeight + _constants.POPOVER_ADDING_HEIGHT > 0) {
+        let 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;
+      }
+    }
+  }, []);
+  const setCollaboratorsPopoverPosition = (0, _react.useCallback)(caretPosition => {
+    if (!collaboratorsPopoverRef.current) return;
+    const {
+      height,
+      width
+    } = collaboratorsPopoverRef.current.getBoundingClientRect();
+    const {
+      offsetHeight
+    } = collaboratorsPopoverRef.current;
+
+    // Whether the vertical direction exceeds the screen
+    const isVerticalDirectionBeyondScreen = height + caretPosition.y + _constants.LINE_HEIGHT > window.innerHeight;
+
+    // if the vertical direction exceeds the screen, collaboratorsPopoverRef appear above the cursor
+    const top = isVerticalDirectionBeyondScreen ? `${caretPosition.y - offsetHeight + _constants.LINE_HEIGHT}px` : `${caretPosition.y + _constants.LINE_HEIGHT}px`;
+    collaboratorsPopoverRef.current.style.top = top;
+
+    // Whether the horizontal direction exceeds the screen
+    const 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
+    const left = isHorizontalDirectionBeyondScreen ? `${window.innerWidth - width}px` : `${caretPosition.x + _constants.FONT_SIZE_WIDTH}px`;
+    collaboratorsPopoverRef.current.style.left = left;
+  }, [collaboratorsPopoverRef]);
+  const getSearchedCollaborators = (0, _react.useCallback)(searchingText => {
+    if (!searchingText.length) return validCollaborators;
+    if (searchingText) return (0, _utils.searchCollaborators)(validCollaborators, searchingText, editor);
+    return [];
+  }, [editor, validCollaborators]);
+  const handleInvolvedKeyUp = (0, _react.useCallback)(() => {
+    const searchedCollaborators = getSearchedCollaborators(searchText);
+    if (searchedCollaborators.length === 0) {
+      hideCommentPopover();
+      return;
+    }
+    setActiveCollaboratorIndex(0);
+    setSearchedCollaborators(searchedCollaborators);
+    setTimeout(() => {
+      const caretPosition = (0, _helper.getSelectionCoords)();
+      setCollaboratorsPopoverPosition(caretPosition);
+    }, 1);
+  }, [getSearchedCollaborators, searchText, hideCommentPopover, setCollaboratorsPopoverPosition]);
+  const handleSelectingCollaborator = (0, _react.useCallback)((event, direction) => {
+    (0, _mouseEvent.eventStopPropagation)(event);
+    const collaboratorsLen = searchedCollaborators.length;
+    if (collaboratorsLen === 0) return;
+    let nextActiveCollaboratorIndex = activeCollaboratorIndex;
+    if (direction === _constants.DOWN) {
+      nextActiveCollaboratorIndex++;
+      if (nextActiveCollaboratorIndex >= collaboratorsLen) {
+        nextActiveCollaboratorIndex = 0;
+      }
+    } else {
+      nextActiveCollaboratorIndex--;
+      if (nextActiveCollaboratorIndex < 0) {
+        nextActiveCollaboratorIndex = collaboratorsLen - 1;
+      }
+    }
+    setActiveCollaboratorIndex(nextActiveCollaboratorIndex);
+  }, [searchedCollaborators, activeCollaboratorIndex]);
+  const onSelectCollaborator = (0, _react.useCallback)(collaborator => {
+    const [, path] = (0, _helper.getMentionTempIptEntry)(editor);
+    (0, _helper.insertMention)(editor, collaborator);
+    addParticipants(collaborator.username);
+    _slate.Transforms.removeNodes(editor, {
+      at: path
+    });
+    const focusPath = _slate.Editor.next(editor, {
+      at: path
+    })[1];
+    (0, _core.focusEditor)(editor, _slate.Editor.start(editor, focusPath));
+    hideCommentPopover();
+  }, [editor, hideCommentPopover, addParticipants]);
+  const handleSelectCollaborator = (0, _react.useCallback)(event => {
+    if (searchedCollaborators.length === 0) return;
+    onSelectCollaborator(searchedCollaborators[activeCollaboratorIndex]);
+  }, [searchedCollaborators, activeCollaboratorIndex, onSelectCollaborator]);
+  const handleMentionChosen = (0, _react.useCallback)(_ref2 => {
+    let {
+      event
+    } = _ref2;
+    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)(() => {
+    const handleKeydownCapture = event => {
+      if (event.keyCode === _constants2.KeyCodes.Enter) {
+        handleMentionChosen({
+          event
+        });
+      }
+    };
+    document.addEventListener('keydown', handleKeydownCapture, true);
+    return () => {
+      document.removeEventListener('keydown', handleKeydownCapture, true);
+    };
+  }, [handleMentionChosen]);
+  const handleSearchTextChange = (0, _react.useCallback)(() => {
+    const newCollaborators = getSearchedCollaborators(searchText);
+    if (newCollaborators.length === 0) {
+      hideCommentPopover();
+      return;
+    }
+    setSearchedCollaborators(newCollaborators);
+    setTimeout(() => {
+      const caretPosition = (0, _helper.getSelectionCoords)();
+      setCollaboratorsPopoverPosition(caretPosition);
+    }, 1);
+  }, [getSearchedCollaborators, hideCommentPopover, searchText, setCollaboratorsPopoverPosition]);
+  (0, _react.useEffect)(() => {
+    handleSearchTextChange();
+    setActiveCollaboratorIndex(0);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [searchText, validCollaborators]);
+  (0, _react.useEffect)(() => {
+    const eventBus = _eventBus.default.getInstance();
+    const unsubscribe = eventBus.subscribe(_constants2.INTERNAL_EVENT.HANDLE_MENTION_TEMP_CHOSEN, handleMentionChosen);
+    return () => {
+      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((participant, index) => /*#__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/basic-sdk/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;
+const COLUMN_MIN_WIDTH = exports.COLUMN_MIN_WIDTH = 80;

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

@@ -0,0 +1,192 @@
+"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 _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");
+const insertMultiColumn = function (editor, selection) {
+  let position = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : _constants2.INSERT_POSITION.CURRENT;
+  let type = arguments.length > 3 ? arguments[3] : undefined;
+  const multiColumnNode = generateEmptyMultiColumn(editor, type);
+  const validSelection = selection || editor.selection;
+  const path = _slate.Editor.path(editor, validSelection);
+  handleInsertMultiColumn(editor, position, path, multiColumnNode);
+};
+exports.insertMultiColumn = insertMultiColumn;
+const generateEmptyMultiColumn = (editor, MultiColumnType) => {
+  let columnNodes = [];
+  let column = [];
+  let 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;
+  }
+  const currentPageWidth = getCurrentPageWidth(editor);
+  const initialColumnWidth = Math.max(_constants3.COLUMN_MIN_WIDTH, parseInt(currentPageWidth / multiColumnNumber));
+  for (let i = 0; i < multiColumnNumber; i++) {
+    const columnWidthKey = _slugid.default.nice();
+    column.push({
+      key: columnWidthKey,
+      width: initialColumnWidth
+    });
+    const columnWidth = column.find(col => 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()
+        }]
+      }]
+    });
+  }
+  return {
+    id: _slugid.default.nice(),
+    type: _constants2.ELEMENT_TYPE.MULTI_COLUMN,
+    children: columnNodes,
+    column,
+    style: {
+      gridTemplateColumns: `repeat(${multiColumnNumber}, ${initialColumnWidth}px)`
+    }
+  };
+};
+exports.generateEmptyMultiColumn = generateEmptyMultiColumn;
+const updateColumnWidth = (editor, element, column, newPath) => {
+  const path = (0, _core.findPath)(editor, element, newPath);
+  const gridTemplateColumns = column.map(column => `${column.width}px`).join(' ');
+  _slate.Transforms.setNodes(editor, {
+    column: column,
+    style: {
+      gridTemplateColumns
+    }
+  }, {
+    at: path
+  });
+};
+exports.updateColumnWidth = updateColumnWidth;
+const handleInsertMultiColumn = (editor, insertPosition, path, multiColumnNode) => {
+  const {
+    selection
+  } = editor;
+  if (!selection) return;
+  let 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
+    const 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);
+};
+exports.handleInsertMultiColumn = handleInsertMultiColumn;
+const updateColumnWidthOnDeletion = function (editor, selection, column, deletionDirection) {
+  let isDragged = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : false;
+  const multiColumnPath = !isDragged ? [selection.anchor.path[0]] : [selection[0]];
+  const newMultiColumnNode = _slate.Node.get(editor, multiColumnPath);
+  const targetColumnIndex = !isDragged ? selection.anchor.path[1] + (deletionDirection === 'deleteForward' ? 1 : 0) : selection[1] + (deletionDirection === 'deleteForward' ? 1 : 0);
+  const remainingColumn = column.filter((_, index) => index !== targetColumnIndex);
+  const currentPageWidth = getCurrentPageWidth(editor);
+  const columnWidth = Math.max(_constants3.COLUMN_MIN_WIDTH, parseInt(currentPageWidth / remainingColumn.length));
+
+  // Recalculate width of every left column
+  const newColumn = remainingColumn.map((column, index) => ({
+    ...column,
+    left: index * columnWidth,
+    width: columnWidth
+  }));
+  updateColumnWidth(editor, newMultiColumnNode, newColumn, multiColumnPath);
+};
+exports.updateColumnWidthOnDeletion = updateColumnWidthOnDeletion;
+const getCurrentPageWidth = editor => {
+  const sdocEditorPage = document.getElementById('sdoc-editor');
+  let 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;
+    const sdocEditorPageContent = document.getElementsByClassName('sdoc-editor-page-content')[0];
+    const pageContentWidth = sdocEditorPageContent === null || sdocEditorPageContent === void 0 ? void 0 : sdocEditorPageContent.getBoundingClientRect().width;
+    const pageWidthString = (_getStyleByFullWidthM = (0, _fullWidthMode.getStyleByFullWidthMode)(undefined, editor)) === null || _getStyleByFullWidthM === void 0 ? void 0 : _getStyleByFullWidthM.width;
+    const 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((sum, num) => sum + num, 0) - 120 - 2;
+  }
+  return pageWidth;
+};
+exports.getCurrentPageWidth = getCurrentPageWidth;
+const hasImageInColumn = (editor, columnPath) => {
+  for (const [node] of _slate.Editor.nodes(editor, {
+    at: columnPath
+  })) {
+    if ([_constants2.IMAGE_BLOCK, _constants2.IMAGE].includes(node === null || node === void 0 ? void 0 : node.type)) {
+      return true;
+    }
+  }
+  return false;
+};
+exports.hasImageInColumn = hasImageInColumn;

package/dist/basic-sdk/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");
+const MultiColumnPlugin = {
+  type: _constants.MULTI_COLUMN,
+  nodeType: 'element',
+  editorPlugin: _plugin.default,
+  renderElements: [_renderElem.renderMultiColumn, _renderElem.renderColumn]
+};
+var _default = exports.default = MultiColumnPlugin;

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

@@ -0,0 +1,153 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _slate = require("@seafile/slate");
+var _constants = require("../../constants");
+var _core = require("../../core");
+var _unwrapList = require("../list/transforms/unwrap-list");
+var _helper = require("./helper");
+const withMultiColumn = editor => {
+  const {
+    normalizeNode,
+    deleteBackward,
+    deleteForward
+  } = editor;
+  const newEditor = editor;
+  newEditor.normalizeNode = _ref => {
+    let [node, path] = _ref;
+    const type = (0, _core.getNodeType)(node);
+    if (node.type === _constants.ELEMENT_TYPE.COLUMN) {
+      const 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
+    const isLast = (0, _core.isLastNode)(newEditor, node);
+    if (isLast) {
+      const p = (0, _core.generateEmptyElement)(_constants.ELEMENT_TYPE.PARAGRAPH);
+      _slate.Transforms.insertNodes(newEditor, p, {
+        at: [path[0] + 1]
+      });
+    }
+  };
+  newEditor.deleteBackward = unit => {
+    const {
+      selection
+    } = editor;
+    if (!selection) return;
+    const currentMultiColumnEntry = (0, _core.getSelectedNodeEntryByType)(editor, _constants.ELEMENT_TYPE.MULTI_COLUMN);
+    if (!currentMultiColumnEntry) return deleteBackward(unit);
+    const {
+      column,
+      children: childColumn
+    } = currentMultiColumnEntry[0];
+    const currentColumnEntry = (0, _core.getSelectedNodeEntryByType)(editor, _constants.ELEMENT_TYPE.COLUMN);
+    const isOnlyOneChild = currentColumnEntry[0].children.length === 1;
+    const isAtStart = _slate.Editor.isStart(editor, selection.focus, selection.anchor.path.slice(0, 2));
+    const currentNodeInColumn = currentColumnEntry[0].children[0];
+    const 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) {
+      const 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 = unit => {
+    const {
+      selection
+    } = editor;
+    if (!selection) return;
+    const nextNode = _slate.Editor.next(newEditor);
+    const nextColumnIndex = nextNode[1][1];
+    const currentMultiColumnEntry = (0, _core.getSelectedNodeEntryByType)(editor, _constants.ELEMENT_TYPE.MULTI_COLUMN);
+    if (!currentMultiColumnEntry) return deleteForward(unit);
+    const {
+      column,
+      children: childColumn
+    } = currentMultiColumnEntry[0];
+    const isOnlyOneChild = childColumn[nextColumnIndex].children.length === 1;
+    const 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
+    const 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;

package/dist/basic-sdk/extension/plugins/multi-column/render/index.css

@@ -0,0 +1,51 @@
+.sdoc-multicolumn-wrapper {
+  width: 100%;
+  max-width: 100%;
+  margin: 16px 0;
+  display: grid;
+  height: auto;
+}
+
+.sdoc-multicolumn-wrapper .sdoc-multicolumn-container {
+  min-height: 43px;
+  position: relative;
+  display: grid;
+  cursor: text;
+}
+
+.sdoc-multicolumn-wrapper .column {
+  display: flex;
+  left: 3px;
+  align-items: flex-start;
+}
+
+.sdoc-column-container {
+  width: calc(100% - 50px);
+  max-width: 100%;
+  position: relative;
+  padding: 5px 5px 5px 0px;
+  box-sizing: border-box;
+  word-wrap: break-word;
+  white-space: pre-wrap;
+}
+
+.sdoc-multicolumn-container .column-resize-handler {
+  height: 100%;
+  position: absolute;
+}
+
+.sdoc-multicolumn-container .column-resize-handler .column-width-just {
+  height: 100%;
+  width: 4px;
+  top: 0;
+  z-index: 1;
+  margin-right: 1.5px;
+  position: absolute;
+  cursor: col-resize;
+}
+
+.sdoc-multicolumn-container .column-resize-handler .column-width-just.active,
+.sdoc-multicolumn-container .column-resize-handler .column-width-just:hover  {
+  background-color: lightgray;
+  cursor: col-resize;
+}