@seafile/comment-editor 0.0.1-alpha.0

package/dist/basic-sdk/extension/plugins/search-replace/menu/index.js

@@ -0,0 +1,89 @@
+"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 _reactDom = require("react-dom");
+var _constants = require("../../../../constants");
+var _eventBus = _interopRequireDefault(require("../../../../utils/event-bus"));
+var _commons = require("../../../commons");
+var _constants2 = require("../../../constants");
+var _menusConfig = require("../../../constants/menus-config");
+var _popover = _interopRequireDefault(require("../popover"));
+require("./index.css");
+const menuConfig = _constants2.MENUS_CONFIG_MAP[_menusConfig.SEARCH_REPLACE];
+const SearchReplaceMenu = _ref => {
+  let {
+    isRichEditor,
+    className,
+    editor,
+    readonly
+  } = _ref;
+  const [isOpenPopover, setIsOpenPopover] = (0, _react.useState)(false);
+  (0, _react.useEffect)(() => {
+    const eventBus = _eventBus.default.getInstance();
+    const unsubscribe = eventBus.subscribe(_constants.INTERNAL_EVENT.OPEN_SEARCH_REPLACE_MODAL, () => setIsOpenPopover(true));
+    return () => unsubscribe();
+  }, [isOpenPopover]);
+  const onMouseDown = (0, _react.useCallback)(() => {
+    setIsOpenPopover(!isOpenPopover);
+  }, [isOpenPopover]);
+  const articleContainer = document.querySelector('.sdoc-article-container');
+  const articleContainerSize = (0, _react.useMemo)(() => {
+    const articleContainer = document.querySelector('.sdoc-article-container');
+    if (!articleContainer) return null;
+    const {
+      offsetHeight,
+      offsetWidth,
+      clientHeight
+    } = articleContainer;
+    return {
+      offsetHeight,
+      offsetWidth,
+      clientHeight
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isOpenPopover]);
+  const renderCanvasses = (0, _react.useMemo)(() => {
+    if (!isOpenPopover) return false;
+    const generateCount = Math.ceil(articleContainerSize.offsetHeight / 5000);
+    const canvasList = [];
+    for (let index = 0; index < generateCount; index++) {
+      const top = index * 5000;
+      canvasList.push(/*#__PURE__*/_react.default.createElement("canvas", {
+        key: 'sdoc-find-search-' + index,
+        id: `sdoc-find-search-${index}`,
+        className: "sdoc-find-search-highlight-canvas",
+        width: articleContainerSize.offsetWidth,
+        height: 5000,
+        style: {
+          top
+        }
+      }));
+    }
+    return canvasList;
+  }, [articleContainerSize, isOpenPopover]);
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_commons.MenuItem, Object.assign({
+    isRichEditor: isRichEditor,
+    className: className,
+    ariaLabel: "search",
+    disabled: false,
+    isActive: isOpenPopover,
+    onMouseDown: onMouseDown
+  }, menuConfig)), isOpenPopover && /*#__PURE__*/_react.default.createElement(_popover.default, {
+    editor: editor,
+    readonly: readonly,
+    isOpen: isOpenPopover,
+    closePopover: onMouseDown
+  }), isOpenPopover && /*#__PURE__*/(0, _reactDom.createPortal)(/*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      height: articleContainerSize.clientHeight
+    },
+    className: "sdoc-search-highlight-container"
+  }, renderCanvasses), articleContainer));
+};
+var _default = exports.default = SearchReplaceMenu;

package/dist/basic-sdk/extension/plugins/search-replace/plugin.js

@@ -0,0 +1,28 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _isHotkey = _interopRequireDefault(require("is-hotkey"));
+var _constants = require("../../../constants");
+var _eventBus = _interopRequireDefault(require("../../../utils/event-bus"));
+const withSearchReplace = editor => {
+  const {
+    onHotKeyDown
+  } = editor;
+  const newEditor = editor;
+  newEditor.onHotKeyDown = event => {
+    if ((0, _isHotkey.default)('mod+f', event)) {
+      event.preventDefault();
+      event.stopPropagation();
+      const eventBus = _eventBus.default.getInstance();
+      eventBus.dispatch(_constants.INTERNAL_EVENT.OPEN_SEARCH_REPLACE_MODAL);
+      return false;
+    }
+    return onHotKeyDown && onHotKeyDown(event);
+  };
+  return newEditor;
+};
+var _default = exports.default = withSearchReplace;

package/dist/basic-sdk/extension/plugins/search-replace/popover/index.css

@@ -0,0 +1,98 @@
+.sdoc-search-replace-popover-container {
+  position: absolute;
+  width: 400px;
+  height: 280px;
+  z-index: 103;
+  background: #fff;
+  border: 1px solid #ebebeb;
+}
+
+.sdoc-search-replace-popover-container .sdoc-search-replace-popover-title {
+  display: flex;
+  justify-content: space-between;
+  padding: 10px 15px;
+  border-bottom: 1px solid #ebebeb;
+  pointer-events: none;
+  user-select: none;
+}
+
+.sdoc-search-replace-popover-container .sdoc-search-replace-popover-title .sdoc-search-replace-title-text {
+  font-weight: 600;
+  color: #333;
+}
+
+.sdoc-search-replace-popover-container .sdoc-search-replace-popover-title .sdoc-search-replace-title-close {
+  cursor: pointer;
+  pointer-events: all;
+  width: 24px;
+  display: flex;
+  justify-content: center;
+  border-radius: 2px;
+}
+
+.sdoc-search-replace-popover-container .sdoc-search-replace-popover-title .sdoc-search-replace-title-close:hover {
+  background-color: #EFEFEF;
+  cursor: pointer;
+}
+
+.sdoc-search-replace-popover-container .sdoc-search-replace-popover-body {
+  padding: 10px 15px;
+  pointer-events: visibleFill;
+  pointer-events: none;
+}
+
+.sdoc-search-replace-popover-body label,
+.sdoc-search-replace-popover-body input,
+.sdoc-search-replace-popover-body button {
+  pointer-events: auto;
+}
+
+.sdoc-search-replace-popover-body label {
+  user-select: none;
+}
+
+.sdoc-search-replace-popover-body .sdoc-replace-ipt-label {
+  margin-top: 10px;
+}
+
+.sdoc-search-replace-popover-body .sdoc-search-replace-popover-btn-group {
+  margin-top: 20px;
+  display: flex;
+  justify-content: space-between;
+}
+
+.sdoc-search-replace-popover-body .sdoc-search-replace-popover-btn-group .btn {
+  padding: 0;
+  width: 23%;
+  min-height: 35px;
+  border-radius: 5px;
+}
+
+.sdoc-replace-all-confirm-modal {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 104;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.5);
+}
+
+.sdoc-replace-ipt-container {
+  display: flex;
+  position: relative;
+}
+
+.sdoc-replace-ipt-container input {
+  padding-right: 85px;
+}
+
+.sdoc-replace-ipt-container .sdoc-replace-ipt-tip {
+  position: absolute;
+  right: 15px;
+  top: 0;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}

package/dist/basic-sdk/extension/plugins/search-replace/popover/index.js

@@ -0,0 +1,238 @@
+"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 _reactDom = require("react-dom");
+var _reactI18next = require("react-i18next");
+var _reactstrap = require("reactstrap");
+var _isHotkey = _interopRequireDefault(require("is-hotkey"));
+var _constants = require("../../../../constants");
+var _context = _interopRequireDefault(require("../../../../context"));
+var _debounce = _interopRequireDefault(require("../../../../utils/debounce"));
+var _eventBus = _interopRequireDefault(require("../../../../utils/event-bus"));
+var _helper = require("../helper");
+var _replaceAllConfirmModal = _interopRequireDefault(require("./replace-all-confirm-modal"));
+require("./index.css");
+const SearchReplacePopover = _ref => {
+  let {
+    editor,
+    closePopover,
+    readonly
+  } = _ref;
+  const [searchContent, setSearchContent] = (0, _react.useState)('');
+  const [replacementContent, setReplacementContent] = (0, _react.useState)('');
+  const [highlightInfos, setHighlightInfos] = (0, _react.useState)([]);
+  const [isMoving, setIsMoving] = (0, _react.useState)(false);
+  const [popoverPosition, setPopoverPosition] = (0, _react.useState)({
+    x: 0,
+    y: 100
+  });
+  const [currentSelectIndex, setCurrentSelectIndex] = (0, _react.useState)(0);
+  const [isOpenReplaceAllModal, setIsOpenReplaceAllModal] = (0, _react.useState)(false);
+  const pageInnerSizeRef = (0, _react.useRef)({
+    x: window.innerWidth,
+    y: window.innerHeight
+  });
+  const shouldScrollIntoView = (0, _react.useRef)(false);
+  const popoverContainerRef = (0, _react.useRef)(null);
+  const searchInputRef = (0, _react.useRef)(null);
+  const {
+    t
+  } = (0, _reactI18next.useTranslation)('sdoc-editor');
+  const searchInputSuffixContent = (0, _react.useMemo)(() => {
+    if (!!searchContent.length && !highlightInfos.length) return t('Search_not_found');
+    if (highlightInfos.length) return `${currentSelectIndex + 1} / ${highlightInfos.length}`;
+  }, [currentSelectIndex, highlightInfos.length, searchContent.length, t]);
+  (0, _react.useEffect)(() => {
+    let y = 95;
+    if (editor.topOffset) {
+      y = editor.topOffset;
+    }
+    setPopoverPosition({
+      x: pageInnerSizeRef.current.x - 420,
+      y
+    });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  const isOwnReplacePermission = (0, _react.useMemo)(() => {
+    if (readonly) return false;
+    const isFreezed = _context.default.getSetting('isFreezed');
+    if (isFreezed) return false;
+    const isPublished = _context.default.getSetting('isPublished');
+    const isSdocRevision = _context.default.getSetting('isSdocRevision');
+    if (isSdocRevision && isPublished) return false;
+    const docPerm = _context.default.getSetting('docPerm');
+    if (docPerm === 'rw') return true;
+    return false;
+  }, [readonly]);
+  const handleDrawHighlight = (0, _react.useCallback)((editor, keyword) => {
+    const newHighlightInfos = (0, _helper.getHighlightInfos)(editor, keyword);
+    setHighlightInfos(newHighlightInfos);
+    let newSelectIndex = currentSelectIndex;
+    if (!shouldScrollIntoView.current && newHighlightInfos.length !== highlightInfos.length) {
+      newSelectIndex = 0;
+    }
+    if (newSelectIndex >= newHighlightInfos.length) {
+      newSelectIndex = newHighlightInfos.length - 1;
+    }
+    if (newSelectIndex < 0 && newHighlightInfos.length) {
+      newSelectIndex = 0;
+    }
+    setCurrentSelectIndex(newSelectIndex);
+  }, [currentSelectIndex, highlightInfos.length, shouldScrollIntoView]);
+  const handleDrawHighlightLister = (0, _react.useCallback)(() => {
+    handleDrawHighlight(editor, searchContent);
+    pageInnerSizeRef.current = {
+      x: window.innerWidth,
+      y: window.innerHeight
+    };
+  }, [editor, handleDrawHighlight, searchContent]);
+  (0, _react.useEffect)(() => {
+    const highlightInfos = (0, _helper.getHighlightInfos)(editor, searchContent);
+    (0, _helper.drawHighlights)(editor, highlightInfos, currentSelectIndex, shouldScrollIntoView.current);
+    shouldScrollIntoView.current = false;
+  }, [currentSelectIndex, editor, searchContent, highlightInfos, shouldScrollIntoView]);
+  (0, _react.useEffect)(() => {
+    const eventBus = _eventBus.default.getInstance();
+    const unSubscribe = eventBus.subscribe(_constants.INTERNAL_EVENT.UPDATE_SEARCH_REPLACE_HIGHLIGHT, handleDrawHighlightLister);
+    return () => {
+      unSubscribe();
+    };
+  }, [editor, handleDrawHighlight, handleDrawHighlightLister, highlightInfos.length, searchContent]);
+  const handleSearchInputChange = (0, _react.useCallback)(e => {
+    const keyword = e.target.value;
+    shouldScrollIntoView.current = true;
+    setSearchContent(keyword);
+    handleDrawHighlight(editor, keyword);
+    setCurrentSelectIndex(0);
+  }, [editor, handleDrawHighlight]);
+  const handleLast = (0, _react.useCallback)(() => {
+    const currentIndex = currentSelectIndex === 0 ? highlightInfos.length - 1 : currentSelectIndex - 1;
+    setCurrentSelectIndex(currentIndex);
+    shouldScrollIntoView.current = true;
+  }, [currentSelectIndex, highlightInfos.length]);
+  const handleNext = (0, _react.useCallback)(() => {
+    const currentIndex = currentSelectIndex === highlightInfos.length - 1 ? 0 : currentSelectIndex + 1;
+    setCurrentSelectIndex(currentIndex);
+    shouldScrollIntoView.current = true;
+  }, [currentSelectIndex, highlightInfos.length]);
+  const handleOpenReplaceAllModal = (0, _react.useCallback)(() => {
+    setIsOpenReplaceAllModal(true);
+  }, []);
+  const handleCloseReplaceAllModal = (0, _react.useCallback)(() => {
+    setIsOpenReplaceAllModal(false);
+  }, []);
+  const handleReplace = (0, _react.useCallback)(() => {
+    (0, _helper.handleReplaceKeyword)(editor, [highlightInfos[currentSelectIndex]], replacementContent);
+    shouldScrollIntoView.current = true;
+  }, [currentSelectIndex, editor, highlightInfos, replacementContent]);
+  const handleReplaceAll = (0, _react.useCallback)(() => {
+    (0, _helper.handleReplaceKeyword)(editor, highlightInfos, replacementContent);
+    handleCloseReplaceAllModal();
+  }, [editor, handleCloseReplaceAllModal, highlightInfos, replacementContent]);
+  const handleStartMove = (0, _react.useCallback)(e => {
+    if (!e.target.className.includes('sdoc-search-replace-popover-container')) return;
+    setIsMoving(true);
+  }, []);
+  const handleMouseMove = (0, _react.useCallback)(e => {
+    if (!isMoving) return;
+    const {
+      width,
+      height
+    } = popoverContainerRef.current.getBoundingClientRect();
+    const {
+      movementX,
+      movementY
+    } = e;
+    let x = popoverPosition.x + movementX;
+    let y = popoverPosition.y + movementY;
+    if (x <= 0) x = 0;
+    if (y < 0) y = 0;
+    if (x + width >= pageInnerSizeRef.current.x) x = pageInnerSizeRef.current.x - width;
+    if (y + height >= pageInnerSizeRef.current.y) y = pageInnerSizeRef.current.y - height;
+    setPopoverPosition({
+      x,
+      y
+    });
+  }, [isMoving, popoverPosition.x, popoverPosition.y]);
+  const handleFinishMove = (0, _react.useCallback)(() => {
+    setIsMoving(false);
+  }, []);
+  const handleInputKeyDown = e => {
+    if (!highlightInfos.length) return;
+    if ((0, _isHotkey.default)('enter', e)) handleNext();
+    if ((0, _isHotkey.default)('enter+shift', e)) handleLast();
+  };
+  return /*#__PURE__*/(0, _reactDom.createPortal)(/*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+    className: "sdoc-search-replace-popover-container",
+    onMouseDown: handleStartMove,
+    onMouseMove: handleMouseMove,
+    onMouseUp: handleFinishMove,
+    onMouseLeave: handleFinishMove,
+    ref: popoverContainerRef,
+    style: {
+      left: popoverPosition.x,
+      top: popoverPosition.y
+    }
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "sdoc-search-replace-popover-title"
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    className: "sdoc-search-replace-title-text"
+  }, t('Search_and_replace')), /*#__PURE__*/_react.default.createElement("i", {
+    onClick: closePopover,
+    className: "sdocfont sdoc-sm-close sdoc-search-replace-title-close"
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    className: "sdoc-search-replace-popover-body"
+  }, /*#__PURE__*/_react.default.createElement(_reactstrap.Label, {
+    for: "sdoc-search-replace-search-ipt"
+  }, t('Search')), /*#__PURE__*/_react.default.createElement("div", {
+    className: "sdoc-replace-ipt-container"
+  }, /*#__PURE__*/_react.default.createElement(_reactstrap.Input, {
+    ref: searchInputRef,
+    autoFocus: true,
+    onKeyUp: handleInputKeyDown,
+    onChange: (0, _debounce.default)(handleSearchInputChange, 300),
+    id: "sdoc-search-replace-search-ipt",
+    placeholder: t('Type_search_content')
+  }), searchInputSuffixContent && /*#__PURE__*/_react.default.createElement("div", {
+    className: "sdoc-replace-ipt-tip"
+  }, searchInputSuffixContent)), /*#__PURE__*/_react.default.createElement(_reactstrap.Label, {
+    className: "sdoc-replace-ipt-label",
+    for: "sdoc-search-replace-replace-ipt"
+  }, t('Replace_as')), /*#__PURE__*/_react.default.createElement(_reactstrap.Input, {
+    onChange: e => setReplacementContent(e.target.value),
+    id: "sdoc-search-replace-replace-ipt",
+    placeholder: t('Type_replace_content')
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    className: "sdoc-search-replace-popover-btn-group"
+  }, /*#__PURE__*/_react.default.createElement("button", {
+    disabled: !highlightInfos.length,
+    onClick: handleLast,
+    className: "btn btn-secondary"
+  }, t('Prevs')), /*#__PURE__*/_react.default.createElement("button", {
+    disabled: !highlightInfos.length,
+    onClick: handleNext,
+    className: "btn btn-secondary"
+  }, t('Next')), /*#__PURE__*/_react.default.createElement("button", {
+    disabled: !highlightInfos.length || !isOwnReplacePermission,
+    onClick: handleReplace,
+    className: "btn btn-primary"
+  }, t('Replace')), /*#__PURE__*/_react.default.createElement("button", {
+    disabled: !highlightInfos.length || !isOwnReplacePermission,
+    onClick: handleOpenReplaceAllModal,
+    className: "btn btn-primary"
+  }, t('Replace_all'))))), /*#__PURE__*/_react.default.createElement(_replaceAllConfirmModal.default, {
+    isOpen: isOpenReplaceAllModal,
+    handleConfirm: handleReplaceAll,
+    handleCancel: handleCloseReplaceAllModal,
+    number: highlightInfos.length,
+    originalWord: searchContent,
+    replacedWord: replacementContent
+  })), document.body);
+};
+var _default = exports.default = SearchReplacePopover;

package/dist/basic-sdk/extension/plugins/search-replace/popover/replace-all-confirm-modal.js

@@ -0,0 +1,50 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _reactI18next = require("react-i18next");
+var _reactstrap = require("reactstrap");
+const ReplaceAllConfirmModal = _ref => {
+  let {
+    isOpen,
+    handleConfirm,
+    handleCancel,
+    number,
+    originalWord,
+    replacedWord
+  } = _ref;
+  const {
+    t
+  } = (0, _reactI18next.useTranslation)('sdoc-editor');
+  const modalContent = replacedWord === '' ? t('Are_you_sure_to_clear_all_number_xxx_in_this_document', {
+    number,
+    originalWord
+  }) : t('Are_you_sure_to_replace_all_number_xxx_in_this_document_with_yyy', {
+    number,
+    originalWord,
+    replacedWord
+  });
+  const close = /*#__PURE__*/_react.default.createElement("span", {
+    className: "sdoc-add-link-close-icon",
+    onClick: handleCancel
+  }, /*#__PURE__*/_react.default.createElement("i", {
+    className: "sdocfont sdoc-sm-close",
+    "aria-hidden": "true"
+  }));
+  return /*#__PURE__*/_react.default.createElement(_reactstrap.Modal, {
+    isOpen: isOpen
+  }, /*#__PURE__*/_react.default.createElement(_reactstrap.ModalHeader, {
+    close: close
+  }, t('Tip')), /*#__PURE__*/_react.default.createElement(_reactstrap.ModalBody, null, `${modalContent}`), /*#__PURE__*/_react.default.createElement(_reactstrap.ModalFooter, null, /*#__PURE__*/_react.default.createElement("button", {
+    onClick: handleCancel,
+    className: "btn btn-secondary"
+  }, t('Cancel')), /*#__PURE__*/_react.default.createElement("button", {
+    onClick: handleConfirm,
+    className: "btn btn-primary"
+  }, t('Confirm'))));
+};
+var _default = exports.default = ReplaceAllConfirmModal;

package/dist/basic-sdk/extension/plugins/table/constants/index.js

@@ -0,0 +1,64 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TABLE_TEMPLATE_POSITION_MAP = exports.TABLE_ROW_STYLE = exports.TABLE_ROW_MIN_HEIGHT = exports.TABLE_MAX_ROWS = exports.TABLE_MAX_COLUMNS = exports.TABLE_ELEMENT_SPAN = exports.TABLE_ELEMENT_POSITION = exports.TABLE_ELEMENT = exports.TABLE_CELL_STYLE = exports.TABLE_CELL_MIN_WIDTH = exports.TABLE_ALTERNATE_HIGHLIGHT_CLASS_MAP = exports.SELECTED_TABLE_CELL_BACKGROUND_COLOR = exports.RESIZE_MASK_TOP = exports.RESIZE_MASK_RIGHT = exports.RESIZE_MASK_LEFT = exports.RESIZE_MASK_BOTTOM = exports.RESIZE_HANDLER_ROW = exports.RESIZE_HANDLER_FIRST_COLUMN = exports.RESIZE_HANDLER_COLUMN = exports.INHERIT_CELL_STYLE_WHEN_SELECT_SINGLE = exports.INHERIT_CELL_STYLE_WHEN_SELECT_MULTIPLE = exports.EMPTY_SELECTED_RANGE = exports.DRAG_HANDLER_ROW = exports.DRAG_HANDLER_COLUMN = exports.CELL_SELECTED = void 0;
+const TABLE_MAX_ROWS = exports.TABLE_MAX_ROWS = 500;
+const TABLE_MAX_COLUMNS = exports.TABLE_MAX_COLUMNS = 50;
+const EMPTY_SELECTED_RANGE = exports.EMPTY_SELECTED_RANGE = {
+  minRowIndex: -1,
+  maxRowIndex: -1,
+  minColIndex: -1,
+  maxColIndex: -1
+};
+const TABLE_ROW_MIN_HEIGHT = exports.TABLE_ROW_MIN_HEIGHT = 42;
+const TABLE_CELL_MIN_WIDTH = exports.TABLE_CELL_MIN_WIDTH = 35;
+const TABLE_ELEMENT = exports.TABLE_ELEMENT = {
+  TABLE: 'table',
+  ROW: 'row',
+  COLUMN: 'column',
+  CELL: 'cell'
+};
+const TABLE_ELEMENT_SPAN = exports.TABLE_ELEMENT_SPAN = {
+  [TABLE_ELEMENT.TABLE]: 'table',
+  [TABLE_ELEMENT.ROW]: 'tr',
+  [TABLE_ELEMENT.CELL]: 'td'
+};
+const TABLE_ELEMENT_POSITION = exports.TABLE_ELEMENT_POSITION = {
+  AFTER: 'after',
+  BEFORE: 'before'
+};
+const SELECTED_TABLE_CELL_BACKGROUND_COLOR = exports.SELECTED_TABLE_CELL_BACKGROUND_COLOR = '#dee8fe';
+const TABLE_CELL_STYLE = exports.TABLE_CELL_STYLE = {
+  TEXT_ALIGN: 'text_align',
+  BACKGROUND_COLOR: 'background_color',
+  ALIGN_ITEMS: 'align_items'
+};
+const TABLE_ROW_STYLE = exports.TABLE_ROW_STYLE = {
+  MIN_HEIGHT: 'min_height'
+};
+const TABLE_ALTERNATE_HIGHLIGHT_CLASS_MAP = exports.TABLE_ALTERNATE_HIGHLIGHT_CLASS_MAP = {
+  'sdoc-table-header-3f495d': 'sdoc-table-body-3f495d',
+  'sdoc-table-header-2367f2': 'sdoc-table-body-2367f2',
+  'sdoc-table-header-f77d21': 'sdoc-table-body-f77d21',
+  'sdoc-table-header-0099f4': 'sdoc-table-body-0099f4'
+};
+const TABLE_TEMPLATE_POSITION_MAP = exports.TABLE_TEMPLATE_POSITION_MAP = {
+  '[0,0]': 'sdoc-table-header-3f495d',
+  '[1,0]': 'sdoc-table-header-2367f2',
+  '[0,1]': 'sdoc-table-header-f77d21',
+  '[1,1]': 'sdoc-table-header-0099f4'
+};
+const INHERIT_CELL_STYLE_WHEN_SELECT_SINGLE = exports.INHERIT_CELL_STYLE_WHEN_SELECT_SINGLE = ['background_color'];
+const INHERIT_CELL_STYLE_WHEN_SELECT_MULTIPLE = exports.INHERIT_CELL_STYLE_WHEN_SELECT_MULTIPLE = ['background_color', 'text_align'];
+const RESIZE_MASK_TOP = exports.RESIZE_MASK_TOP = 'top';
+const RESIZE_MASK_RIGHT = exports.RESIZE_MASK_RIGHT = 'right';
+const RESIZE_MASK_BOTTOM = exports.RESIZE_MASK_BOTTOM = 'bottom';
+const RESIZE_MASK_LEFT = exports.RESIZE_MASK_LEFT = 'left';
+const RESIZE_HANDLER_ROW = exports.RESIZE_HANDLER_ROW = 'row';
+const RESIZE_HANDLER_COLUMN = exports.RESIZE_HANDLER_COLUMN = 'column';
+const RESIZE_HANDLER_FIRST_COLUMN = exports.RESIZE_HANDLER_FIRST_COLUMN = 'first_column';
+const DRAG_HANDLER_ROW = exports.DRAG_HANDLER_ROW = 'row';
+const DRAG_HANDLER_COLUMN = exports.DRAG_HANDLER_COLUMN = 'column';
+const CELL_SELECTED = exports.CELL_SELECTED = 'cell-selected';

package/dist/basic-sdk/extension/plugins/table/dialogs/custom-table-size-dialog/index.css

@@ -0,0 +1,7 @@
+.sdoc-custom-table-size-dialog .sdoc-custom-table-size-container {
+  width: 100%;
+}
+
+.sdoc-custom-table-size-dialog .sdoc-custom-table-size-item {
+  width: calc(50% - 16px);
+}

package/dist/basic-sdk/extension/plugins/table/dialogs/custom-table-size-dialog/index.js

@@ -0,0 +1,102 @@
+"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 _reactI18next = require("react-i18next");
+var _reactstrap = require("reactstrap");
+var _constants = require("../../constants");
+var _helpers = require("../../helpers");
+var _numberInput = _interopRequireDefault(require("./number-input"));
+require("./index.css");
+const CustomTableSizeDialog = _ref => {
+  let {
+    editor,
+    insertPosition,
+    closeDialog
+  } = _ref;
+  const {
+    t
+  } = (0, _reactI18next.useTranslation)('sdoc-editor');
+  const [errorMessage, setErrorMessage] = (0, _react.useState)('');
+  const [rows, setRows] = (0, _react.useState)('1');
+  const [cols, setCols] = (0, _react.useState)('1');
+  const submit = (0, _react.useCallback)(() => {
+    if (!rows || !cols || parseInt(rows) < 1 || parseInt(rows) > 50 || parseInt(cols) < 1 || parseInt(cols) > 50) {
+      setErrorMessage('Valid_values_for_rows_and_columns');
+      return;
+    }
+    (0, _helpers.insertTable)(editor, [parseInt(rows), parseInt(cols)], editor.selection, insertPosition);
+    closeDialog();
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [editor, rows, cols, insertPosition]);
+  const rowsChange = (0, _react.useCallback)(event => {
+    const value = event.target.value;
+    if (value === rows) return;
+    setErrorMessage('');
+    setRows(value);
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [rows]);
+  const colsChange = (0, _react.useCallback)(event => {
+    const value = event.target.value;
+    if (value === cols) return;
+    setErrorMessage('');
+    setCols(value);
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [cols]);
+  const close = (0, _react.useMemo)(() => {
+    return /*#__PURE__*/_react.default.createElement("span", {
+      className: "sdoc-add-link-close-icon",
+      onClick: closeDialog
+    }, /*#__PURE__*/_react.default.createElement("i", {
+      className: "sdocfont sdoc-sm-close",
+      "aria-hidden": "true"
+    }));
+  }, [closeDialog]);
+  return /*#__PURE__*/_react.default.createElement(_reactstrap.Modal, {
+    isOpen: true,
+    toggle: closeDialog,
+    size: "md",
+    className: "sdoc-custom-table-size-dialog",
+    zIndex: 1111
+  }, /*#__PURE__*/_react.default.createElement(_reactstrap.ModalHeader, {
+    close: close
+  }, t('Customize_the_number_of_rows_and_columns')), /*#__PURE__*/_react.default.createElement(_reactstrap.ModalBody, null, /*#__PURE__*/_react.default.createElement("div", {
+    className: "d-flex sdoc-custom-table-size-container"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "d-flex flex-column sdoc-custom-table-size-item mr-4"
+  }, /*#__PURE__*/_react.default.createElement(_reactstrap.Label, {
+    className: "mb-2"
+  }, t('Rows')), /*#__PURE__*/_react.default.createElement(_numberInput.default, {
+    min: 1,
+    max: _constants.TABLE_MAX_ROWS,
+    value: rows,
+    onChange: rowsChange
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    className: "d-flex flex-column sdoc-custom-table-size-item"
+  }, /*#__PURE__*/_react.default.createElement(_reactstrap.Label, {
+    className: "mb-2"
+  }, t('Columns')), /*#__PURE__*/_react.default.createElement(_numberInput.default, {
+    min: 1,
+    max: _constants.TABLE_MAX_COLUMNS,
+    value: cols,
+    onChange: colsChange
+  }))), errorMessage && /*#__PURE__*/_react.default.createElement(_reactstrap.Alert, {
+    className: "mt-2 mb-0",
+    color: "danger"
+  }, t(errorMessage))), /*#__PURE__*/_react.default.createElement(_reactstrap.ModalFooter, null, /*#__PURE__*/_react.default.createElement(_reactstrap.Button, {
+    color: "secondary",
+    onClick: closeDialog
+  }, t('Cancel')), /*#__PURE__*/_react.default.createElement(_reactstrap.Button, {
+    color: "primary",
+    onClick: submit
+  }, t('Submit'))));
+};
+var _default = exports.default = CustomTableSizeDialog;