@seafile/sdoc-editor 1.0.35 → 1.0.36

package/dist/basic-sdk/extension/plugins/seatable-tables/draggable/index.css

@@ -0,0 +1,7 @@
+.seatable-column-draggable {
+  cursor: col-resize;
+}
+  
+.seatable-column-draggable:hover {
+  background-color: #2d7ff9;
+}

package/dist/basic-sdk/extension/plugins/seatable-tables/draggable/index.js

@@ -0,0 +1,75 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import React from 'react';
+import { eventStopPropagation, createObjectWithProperties } from '../../../../../basic-sdk/utils/mouse-event';
+import './index.css';
+
+// The list of the propTypes that we want to include in the Draggable div
+const knownDivPropertyKeys = ['onDragStart', 'onDragEnd', 'onDrag', 'style'];
+class Draggable extends React.Component {
+  constructor() {
+    super(...arguments);
+    _defineProperty(this, "state", {
+      drag: null
+    });
+    _defineProperty(this, "onMouseDown", e => {
+      const drag = this.props.onDragStart(e);
+      if (e.preventDefault) {
+        e.preventDefault();
+      }
+      eventStopPropagation(e);
+      if (drag === null && e.button !== 0) {
+        return;
+      }
+      window.addEventListener('mouseup', this.onMouseUp);
+      window.addEventListener('mousemove', this.onMouseMove);
+      window.addEventListener('touchend', this.onMouseUp);
+      window.addEventListener('touchmove', this.onMouseMove);
+      this.setState({
+        drag
+      });
+    });
+    _defineProperty(this, "onMouseMove", e => {
+      if (this.state.drag === null) {
+        return;
+      }
+      if (e.preventDefault) {
+        e.preventDefault();
+      }
+      eventStopPropagation(e);
+      this.props.onDrag(e);
+    });
+    _defineProperty(this, "onMouseUp", e => {
+      eventStopPropagation(e);
+      this.cleanUp();
+      this.props.onDragEnd(e, this.state.drag);
+      this.setState({
+        drag: null
+      });
+    });
+    _defineProperty(this, "cleanUp", () => {
+      window.removeEventListener('mouseup', this.onMouseUp);
+      window.removeEventListener('mousemove', this.onMouseMove);
+      window.removeEventListener('touchend', this.onMouseUp);
+      window.removeEventListener('touchmove', this.onMouseMove);
+    });
+    _defineProperty(this, "getKnownDivProps", () => {
+      return createObjectWithProperties(this.props, knownDivPropertyKeys);
+    });
+  }
+  componentWillUnmount() {
+    this.cleanUp();
+  }
+  render() {
+    return /*#__PURE__*/React.createElement("div", Object.assign({}, this.getKnownDivProps(), {
+      onMouseDown: this.onMouseDown,
+      onTouchStart: this.onMouseDown,
+      className: "seatable-column-draggable"
+    }));
+  }
+}
+_defineProperty(Draggable, "defaultProps", {
+  onDragStart: () => true,
+  onDragEnd: () => {},
+  onDrag: () => {}
+});
+export default Draggable;

package/dist/basic-sdk/extension/plugins/seatable-tables/helpers.js

@@ -2,6 +2,7 @@ import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import { Editor, Transforms } from '@seafile/slate';
 import slugId from 'slugid';
 import { getNodeType, isTextNode, getParentNode, generateDefaultText } from '../../core';
+import { getColumnWidth } from '../seatable-column/helpers';
 import { ELEMENT_TYPE, SEATABLE_TABLE, INSERT_POSITION } from '../../constants';
 export const isInsertSeaTableTableDisabled = (editor, readonly) => {
   if (readonly) return true;
@@ -37,6 +38,10 @@ export const isInsertSeaTableTableDisabled = (editor, readonly) => {
 export const generateSeaTableTable = (table_id, editor) => {
   const table = editor.getTableById(table_id);
   const columnKeys = table.columns.map(item => item.key) || [];
+  const columnWidth = {};
+  table.columns.forEach(item => {
+    columnWidth[item.key] = getColumnWidth(item);
+  });
   return {
     id: slugId.nice(),
     type: SEATABLE_TABLE,
@@ -48,6 +53,7 @@ export const generateSeaTableTable = (table_id, editor) => {
     show_record_numbers: false,
     alternate_color: true,
     select_column_display_option_color: true,
+    column_width: columnWidth,
     children: [generateDefaultText()]
   };
 };

package/dist/basic-sdk/extension/plugins/seatable-tables/op-menu/index.js

@@ -8,6 +8,7 @@ import SortSetter from '../seatable-settings/sort-setter';
 import HideColumnSetter from '../seatable-settings/hide-column-setter';
 import { useScrollContext } from '../../../../hooks/use-scroll-context';
 import { updateSeaTableTable } from '../helpers';
+import { getColumnWidth } from '../../seatable-column/helpers';
 import './index.css';
 const TablesList = _ref => {
   let {
@@ -156,6 +157,10 @@ export default function OpMenu(_ref3) {
     } = item;
     setSelectedTableText(name);
     const table = editor.tables.find(item => item._id === _id);
+    const columnWidth = {};
+    table.columns.forEach(item => {
+      columnWidth[item.key] = getColumnWidth(item);
+    });
     updatePageSettings({
       table_id: _id,
       filters: [],
@@ -164,6 +169,7 @@ export default function OpMenu(_ref3) {
       shown_column_keys: table.columns.map(item => item.key),
       show_record_numbers: false,
       alternate_color: true,
+      column_width: columnWidth,
       select_column_display_option_color: true
     });
     // eslint-disable-next-line react-hooks/exhaustive-deps

package/dist/basic-sdk/extension/plugins/seatable-tables/render-element/index.css

@@ -3,6 +3,7 @@
   overflow: auto;
   border: 2px solid transparent;
   position: relative;
+  user-select: none;
 }
 
 .seatable-view-container.selected {
@@ -13,10 +14,39 @@
   margin: 0;
 }
 
+.seatable-view-container .seatable-column-editor-wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  width: 100%;
+  height: 30px;
+}
+.seatable-view-container .seatable-column-editor-wrapper .seatable-column-width-tip {
+  background-color: #0009;
+  border-radius: 3px;
+  color: #fff;
+  font-size: 13px;
+  line-height: 20px;
+  padding: 2px 8px;
+}
+
 .seatable-view-column-header-row th {
   display: inline-flex;
   align-items: center;
   justify-content: flex-start;
+  flex: unset !important;
+}
+
+.seatable-view-column-header-row .seatable-view-column-header-cell {
+  position: relative;
+}
+
+.seatable-view-column-header-row .seatable-view-column-header-cell span:first-child {
+  white-space: nowrap;
+  overflow: hidden;
 }
 
 .seatable-view-body-column-cell {
@@ -27,6 +57,7 @@
   text-overflow: ellipsis;
   overflow: hidden;
   word-break: break-all;
+  flex: unset !important
 }
 
 .seatable-view-column-header-row .first-cell,

package/dist/basic-sdk/extension/plugins/seatable-tables/render-element/record-header.js

@@ -1,22 +1,76 @@
-import React from 'react';
-import { getColumnWidth } from '../../seatable-column/helpers';
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import React, { useEffect, useRef, useState } from 'react';
+import { ReactEditor } from '@seafile/slate-react';
+import { Transforms } from '@seafile/slate';
+import Draggable from '../draggable';
+const dragAbleStyle = {
+  position: 'absolute',
+  top: 0,
+  right: -3,
+  width: 5,
+  borderRadius: '3px',
+  zIndex: 2,
+  margin: '3px 0',
+  height: 'calc(100% - 6px)'
+};
 export default function RecordHeader(_ref) {
   let {
+    editor,
     element,
-    columns
+    columns,
+    isCanModifyColumnWidth
   } = _ref;
+  const headerCellRef = useRef({});
+  const {
+    column_width = {}
+  } = element;
+  const [columnWidthMap, setColumnWidthMap] = useState(column_width);
+  useEffect(() => {
+    setColumnWidthMap(column_width);
+  }, [column_width]);
+  const getWidthFromMouseEvent = (e, currentCell) => {
+    const right = e.pageX || e.touches && e.touches[0] && e.touches[0].pageX || e.changedTouches && e.changedTouches[e.changedTouches.length - 1].pageX;
+    const left = currentCell.getBoundingClientRect().left;
+    return right - left;
+  };
+  const onDrag = (e, currentCell, currentColumnKey) => {
+    const width = getWidthFromMouseEvent(e, currentCell);
+    if (width >= 80) {
+      const newColumnWidthMap = _objectSpread(_objectSpread({}, columnWidthMap), {}, {
+        [currentColumnKey]: width
+      });
+      setColumnWidthMap(newColumnWidthMap);
+    }
+  };
+  const onDragEnd = () => {
+    const path = ReactEditor.findPath(editor, element);
+    Transforms.setNodes(editor, {
+      column_width: columnWidthMap
+    }, {
+      at: [path[0]]
+    });
+  };
   return /*#__PURE__*/React.createElement("tr", {
     className: "seatable-view-column-header-row"
   }, element.show_record_numbers && /*#__PURE__*/React.createElement("th", {
     className: "seatable-view-column-header-cell first-cell"
   }), columns.map(column => {
-    const width = getColumnWidth(column);
+    const width = columnWidthMap[column.key];
     return /*#__PURE__*/React.createElement("th", {
+      ref: ref => {
+        headerCellRef.current[column.key] = ref;
+      },
       className: "seatable-view-column-header-cell",
       key: column.key,
       style: {
         width
       }
-    }, column.name);
+    }, /*#__PURE__*/React.createElement("span", null, column.name), isCanModifyColumnWidth && /*#__PURE__*/React.createElement(Draggable, {
+      style: dragAbleStyle,
+      onDrag: e => {
+        onDrag(e, headerCellRef.current[column.key], column.key);
+      },
+      onDragEnd: onDragEnd
+    }));
   }));
 }

package/dist/basic-sdk/extension/plugins/seatable-tables/render-element/record-item.js

@@ -1,6 +1,5 @@
 import React from 'react';
 import { CellType } from 'dtable-utils';
-import { getColumnWidth } from '../../seatable-column/helpers';
 import Formatter from '../formatter';
 export default function RecordItem(_ref) {
   let {
@@ -11,12 +10,15 @@ export default function RecordItem(_ref) {
     columns,
     editor
   } = _ref;
+  const {
+    column_width = {}
+  } = element;
   return /*#__PURE__*/React.createElement("tr", {
     className: "seatable-view-body-column-row"
   }, element.show_record_numbers && /*#__PURE__*/React.createElement("th", {
     className: "seatable-view-body-column-cell first-cell"
   }, index), columns.map(column => {
-    const width = getColumnWidth(column);
+    const width = column_width[column.key];
     let cellValue = record[column.key];
     if ([CellType.LINK, CellType.LINK_FORMULA, CellType.FORMULA].includes(column.type)) {
       cellValue = formulaRow[column.key];

package/dist/basic-sdk/extension/plugins/seatable-tables/render-element/record-list.js

@@ -6,7 +6,7 @@ export default function RecordList(_ref) {
     records,
     columns,
     element,
-    formulaRows
+    formulaRows = {}
   } = _ref;
   return /*#__PURE__*/React.createElement(React.Fragment, null, records.map((record, index) => {
     const formulaRow = formulaRows[record._id] || {};

package/dist/basic-sdk/extension/plugins/seatable-tables/render-element/seatable-table.js

@@ -2,13 +2,15 @@ import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import classNames from 'classnames';
 import { useTranslation } from 'react-i18next';
-import { useReadOnly, useSelected } from '@seafile/slate-react';
+import { Transforms } from '@seafile/slate';
+import { useReadOnly, useSelected, ReactEditor } from '@seafile/slate-react';
 import { CellType, getFilteredRowsWithoutFormulaCalculation, sortTableRows } from 'dtable-utils';
 import Loading from '../../../../../components/loading';
 import RecordHeader from './record-header';
 import RecordList from './record-list';
 import OpMenu from '../op-menu';
 import { useScrollContext } from '../../../../hooks/use-scroll-context';
+import { getColumnWidth } from '../../seatable-column/helpers';
 import './index.css';
 function SeaTableTable(_ref) {
   var _tableInfoRef$current, _tableInfoRef$current2;
@@ -19,6 +21,10 @@ function SeaTableTable(_ref) {
     children,
     editor
   } = _ref;
+  const {
+    column_width,
+    table_id
+  } = element;
   const scrollRef = useScrollContext();
   const isSelected = useSelected();
   const readOnly = useReadOnly();
@@ -27,6 +33,8 @@ function SeaTableTable(_ref) {
   const [records, setRecords] = useState([]);
   const [shownRecords, setShownRecords] = useState([]);
   const [isShowTipMessage, setIsShowTipMessage] = useState(false);
+  const [isShowColumnWidth, setIsShowColumnWidth] = useState(false);
+  const [isCanModifyColumnWidth, setIsCanModifyColumnWidth] = useState(false);
   const tableInfoRef = useRef(null);
   const {
     t
@@ -39,6 +47,23 @@ function SeaTableTable(_ref) {
     top: '',
     left: ''
   });
+  useEffect(() => {
+    // Compatible with old element data structures
+    if (!column_width) {
+      const table = editor.getTableById(table_id);
+      const columnWidth = {};
+      table.columns.forEach(item => {
+        columnWidth[item.key] = getColumnWidth(item);
+      });
+      const path = ReactEditor.findPath(editor, element);
+      Transforms.setNodes(editor, {
+        column_width: columnWidth
+      }, {
+        at: [path[0]]
+      });
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [column_width]);
   useEffect(() => {
     const {
       table_id
@@ -184,6 +209,8 @@ function SeaTableTable(_ref) {
   useEffect(() => {
     if (!isSelected) {
       setIsShowMenu(false);
+      setIsShowColumnWidth(false);
+      setIsCanModifyColumnWidth(false);
     }
   }, [isSelected]);
   const onTableClick = useCallback(event => {
@@ -203,6 +230,12 @@ function SeaTableTable(_ref) {
     }
     setMenuPosition(newMenuPosition);
     setIsShowMenu(true);
+    setIsShowColumnWidth(true);
+  }, [readOnly]);
+  const onTableDoubleClick = useCallback(event => {
+    if (readOnly) return;
+    setIsShowColumnWidth(false);
+    setIsCanModifyColumnWidth(true);
   }, [readOnly]);
   const containerClass = classNames('seatable-view-container', {
     selected: isSelected
@@ -213,7 +246,8 @@ function SeaTableTable(_ref) {
   }), /*#__PURE__*/React.createElement("div", {
     ref: seaTableRef,
     className: containerClass,
-    onClick: onTableClick
+    onClick: onTableClick,
+    onDoubleClick: onTableDoubleClick
   }, isShowMenu && /*#__PURE__*/React.createElement(OpMenu, {
     editor: editor,
     element: element,
@@ -224,8 +258,10 @@ function SeaTableTable(_ref) {
       'no_alternate_color': !element.alternate_color
     })
   }, /*#__PURE__*/React.createElement("tbody", null, /*#__PURE__*/React.createElement(RecordHeader, {
+    editor: editor,
     element: element,
-    columns: columns
+    columns: columns,
+    isCanModifyColumnWidth: isCanModifyColumnWidth
   }), /*#__PURE__*/React.createElement(RecordList, {
     element: element,
     editor: editor,
@@ -238,6 +274,10 @@ function SeaTableTable(_ref) {
     count: records.length - 10
   })), readOnly && isShowTipMessage && /*#__PURE__*/React.createElement("div", {
     className: "d-print-none ml-2 m-2"
-  }, t('Print_limit_exceeded'))), children));
+  }, t('Print_limit_exceeded')), !readOnly && isShowColumnWidth && !isCanModifyColumnWidth && /*#__PURE__*/React.createElement("div", {
+    className: "seatable-column-editor-wrapper"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "seatable-column-width-tip"
+  }, t('Double_click_to_enter_edit_mode_and_adjust_field_width')))), children));
 }
 export default SeaTableTable;

package/dist/basic-sdk/layout/article-container.js

@@ -61,10 +61,12 @@ export default function ArticleContainer(_ref) {
     style: containerStyle
   }, React.Children.count(children) === 1 && /*#__PURE__*/React.createElement("div", {
     className: "article",
+    id: "sdoc-editor-print-wrapper",
     ref: articleRef,
     onClick: handelArticleClick
   }, children), React.Children.count(children) > 1 && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
     className: "article",
+    id: "sdoc-editor-print-wrapper",
     ref: articleRef,
     onClick: handelArticleClick
   }, children[0]), [...children.slice(1)]));

package/dist/basic-sdk/utils/mouse-event.js

@@ -58,4 +58,12 @@ export const getMouseMoveInfo = (event, mouseDownInfo, scrollContainer) => {
     displacementX,
     displacementY
   };
+};
+export const createObjectWithProperties = (originalObj, properties) => {
+  return properties.reduce((result, property) => {
+    if (property in originalObj) {
+      result[property] = originalObj[property];
+    }
+    return result;
+  }, {});
 };

package/package.json

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

package/public/locales/cs/sdoc-editor.json

@@ -561,5 +561,6 @@
   "the_past_month": "last month",
   "the_past_year": "last year",
   "the_next_numbers_of_days": "the next numbers of days",
-  "the_past_numbers_of_days": "the past numbers of days"
+  "the_past_numbers_of_days": "the past numbers of days",
+  "Double_click_to_enter_edit_mode_and_adjust_field_width" : "Double click to enter edit mode and adjust field width"
 }

package/public/locales/de/sdoc-editor.json

@@ -561,5 +561,6 @@
   "the_past_month": "last month",
   "the_past_year": "last year",
   "the_next_numbers_of_days": "the next numbers of days",
-  "the_past_numbers_of_days": "the past numbers of days"
+  "the_past_numbers_of_days": "the past numbers of days",
+  "Double_click_to_enter_edit_mode_and_adjust_field_width" : "Double click to enter edit mode and adjust field width"
 }

package/public/locales/en/sdoc-editor.json

@@ -561,5 +561,6 @@
   "the_past_month": "last month",
   "the_past_year": "last year",
   "the_next_numbers_of_days": "the next numbers of days",
-  "the_past_numbers_of_days": "the past numbers of days"
+  "the_past_numbers_of_days": "the past numbers of days",
+  "Double_click_to_enter_edit_mode_and_adjust_field_width" : "Double click to enter edit mode and adjust field width"
 }

package/public/locales/es/sdoc-editor.json

@@ -561,5 +561,6 @@
   "the_past_month": "last month",
   "the_past_year": "last year",
   "the_next_numbers_of_days": "the next numbers of days",
-  "the_past_numbers_of_days": "the past numbers of days"
+  "the_past_numbers_of_days": "the past numbers of days",
+  "Double_click_to_enter_edit_mode_and_adjust_field_width" : "Double click to enter edit mode and adjust field width"
 }

package/public/locales/es_AR/sdoc-editor.json

@@ -561,5 +561,6 @@
   "the_past_month": "last month",
   "the_past_year": "last year",
   "the_next_numbers_of_days": "the next numbers of days",
-  "the_past_numbers_of_days": "the past numbers of days"
+  "the_past_numbers_of_days": "the past numbers of days",
+  "Double_click_to_enter_edit_mode_and_adjust_field_width" : "Double click to enter edit mode and adjust field width"
 }

package/public/locales/es_MX/sdoc-editor.json

@@ -561,5 +561,6 @@
   "the_past_month": "last month",
   "the_past_year": "last year",
   "the_next_numbers_of_days": "the next numbers of days",
-  "the_past_numbers_of_days": "the past numbers of days"
+  "the_past_numbers_of_days": "the past numbers of days",
+  "Double_click_to_enter_edit_mode_and_adjust_field_width" : "Double click to enter edit mode and adjust field width"
 }

package/public/locales/fr/sdoc-editor.json

@@ -561,5 +561,6 @@
   "the_past_month": "last month",
   "the_past_year": "last year",
   "the_next_numbers_of_days": "the next numbers of days",
-  "the_past_numbers_of_days": "the past numbers of days"
+  "the_past_numbers_of_days": "the past numbers of days",
+  "Double_click_to_enter_edit_mode_and_adjust_field_width" : "Double click to enter edit mode and adjust field width"
 }

package/public/locales/it/sdoc-editor.json

@@ -561,5 +561,6 @@
   "the_past_month": "last month",
   "the_past_year": "last year",
   "the_next_numbers_of_days": "the next numbers of days",
-  "the_past_numbers_of_days": "the past numbers of days"
+  "the_past_numbers_of_days": "the past numbers of days",
+  "Double_click_to_enter_edit_mode_and_adjust_field_width" : "Double click to enter edit mode and adjust field width"
 }

package/public/locales/ru/sdoc-editor.json

@@ -561,5 +561,6 @@
   "the_past_month": "в прошлом месяце",
   "the_past_year": "в прошлом году",
   "the_next_numbers_of_days": "ближайшее количество дней",
-  "the_past_numbers_of_days": "прошедшее количество дней"
+  "the_past_numbers_of_days": "прошедшее количество дней",
+  "Double_click_to_enter_edit_mode_and_adjust_field_width" : "Double click to enter edit mode and adjust field width"
 }

package/public/locales/zh_CN/sdoc-editor.json

@@ -561,5 +561,6 @@
   "the_past_month": "上个月",
   "the_past_year": "去年",
   "the_next_numbers_of_days": "今天之后的指定天数",
-  "the_past_numbers_of_days": "今天之前的指定天数"
+  "the_past_numbers_of_days": "今天之前的指定天数",
+  "Double_click_to_enter_edit_mode_and_adjust_field_width" : "双击可进入编辑模式并调整字段宽度"
 }