@seafile/sdoc-editor 0.4.23 → 0.4.26

package/dist/basic-sdk/assets/css/dropdown-menu.css

@@ -13,7 +13,7 @@
 }
 
 .sdoc-dropdown-menu .sdoc-dropdown-menu-item {
-  height: 28px;
+  height: 30px;
   width: 100%;
   padding: 4px 24px;
   user-select: none;

package/dist/basic-sdk/extension/plugins/table/helpers.js

@@ -1257,8 +1257,12 @@ export const getRowDomHeight = (editor, row) => {
       rowspan = 1
     } = cell;
     if (is_combined || rowspan > 1) continue;
-    const cellDom = ReactEditor.toDOMNode(editor, cell);
-    if (!cellDom) break;
+    let cellDom = null;
+    try {
+      cellDom = ReactEditor.toDOMNode(editor, cell);
+    } catch (error) {
+      if (!cellDom) break;
+    }
     height = cellDom.getBoundingClientRect().height;
     break;
   }
@@ -1491,4 +1495,21 @@ export const getResizeMaskCellInfo = (editor, table, rowIndex, cellIndex) => {
     cell,
     focusCellIndex
   };
+};
+
+// Table alternate highlight
+export const getHighlightClass = (editor, cellPath) => {
+  var _tableEntry$;
+  const [tableEntry] = Editor.nodes(editor, {
+    at: cellPath,
+    match: n => n.type === ELEMENT_TYPE.TABLE
+  });
+  const {
+    alternate_highlight,
+    alternate_highlight_color
+  } = ((_tableEntry$ = tableEntry[0]) === null || _tableEntry$ === void 0 ? void 0 : _tableEntry$.ui) || {};
+  if (!alternate_highlight) return '';
+  const rowIndex = cellPath[cellPath.length - 2];
+  const className = getCellHighlightClassName(alternate_highlight_color, rowIndex);
+  return className;
 };

package/dist/basic-sdk/extension/plugins/table/render/render-cell.js

@@ -7,8 +7,7 @@ import ObjectUtils from '../../../../utils/object-utils';
 import { findPath, focusEditor } from '../../../core';
 import { useResizeHandlersContext, useTableSelectedRangeContext } from './hooks';
 import { EMPTY_SELECTED_RANGE, SELECTED_TABLE_CELL_BACKGROUND_COLOR, TABLE_CELL_STYLE } from '../constants';
-import { getTableColumns, colorBlend, getCellHighlightClassName } from '../helpers';
-import { ELEMENT_TYPE } from '../../../constants';
+import { getTableColumns, colorBlend, getHighlightClass } from '../helpers';
 import EventBus from '../../../../utils/event-bus';
 import { INTERNAL_EVENT } from '../../../../constants';
 const TableCell = _ref => {
@@ -75,19 +74,6 @@ const TableCell = _ref => {
   if (element.style) {
     style = _objectSpread(_objectSpread({}, element.style), style);
   }
-
-  // Table alternate highlight
-  const highlightClass = useMemo(() => {
-    var _tableEntry$;
-    const {
-      alternate_highlight,
-      alternate_highlight_color
-    } = ((_tableEntry$ = tableEntry[0]) === null || _tableEntry$ === void 0 ? void 0 : _tableEntry$.ui) || {};
-    if (!alternate_highlight) return '';
-    const className = getCellHighlightClassName(alternate_highlight_color, rowIndex);
-    return className;
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [editor, rowIndex]);
   const onMouseMove = mouseDownEvent => {
     const eventBus = EventBus.getInstance();
     const tableId = tableEntry[0].id;
@@ -99,6 +85,7 @@ const TableCell = _ref => {
       tableId
     });
   };
+  const highlightClass = useMemo(() => getHighlightClass(editor, cellPath), [cellPath, editor]);
   return /*#__PURE__*/React.createElement("div", Object.assign({}, attributes, {
     style: _objectSpread(_objectSpread({}, element.style), style),
     className: classnames('table-cell', attributes.className, highlightClass, {
@@ -133,6 +120,9 @@ function renderTableCell(props) {
     const rowIndex = cellPath[pathLength - 2];
     const cellIndex = cellPath[pathLength - 1];
 
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const highlightClass = useMemo(() => getHighlightClass(editor, cellPath), [cellPath, editor]);
+
     // const cellValue = element;
     let style = attributes.style || {};
     if (ObjectUtils.hasProperty(element.style, TABLE_CELL_STYLE.TEXT_ALIGN)) {
@@ -157,7 +147,7 @@ function renderTableCell(props) {
     style.gridArea = "".concat(rowIndex + 1, " / ").concat(cellIndex + 1, " / span ").concat(rowspan, " / span ").concat(colspan);
     return /*#__PURE__*/React.createElement("div", Object.assign({}, attributes, {
       style: _objectSpread(_objectSpread({}, element.style), style),
-      className: classnames('table-cell', attributes.className),
+      className: classnames('table-cell', highlightClass, attributes.className),
       "data-id": element.id
     }), children);
   }

package/dist/basic-sdk/extension/plugins/table/render/table-header/rows-header/row-header.js

@@ -18,7 +18,7 @@ const RowHeader = _ref => {
     tableSize
   } = _ref;
   const editor = useSlateStatic();
-  useLayoutEffect(() => {
+  useEffect(() => {
     setRowHeight(getRowDomHeight(editor, row));
   }, [editor, row, tableSize]);
   const oldRowHeight = getRowDomHeight(editor, row);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seafile/sdoc-editor",
-  "version": "0.4.23",
+  "version": "0.4.26",
   "private": false,
   "description": "This is a sdoc editor",
   "main": "dist/index.js",