@seafile/sdoc-editor 1.0.203 → 1.0.205

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -56,6 +56,11 @@ const getBeforeText = editor => {
56
56
  anchor,
57
57
  focus
58
58
  } = selection;
59
+ const lastIndex = focus.path[focus.path.length - 1];
60
+ if (lastIndex !== 0) return {
61
+ beforeText: '',
62
+ range: null
63
+ };
59
64
  const range = {
60
65
  anchor,
61
66
  focus: {
@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
4
4
  Object.defineProperty(exports, "__esModule", {
5
5
  value: true
6
6
  });
7
- exports.updateColumnWidthOnDeletion = exports.updateColumnWidth = exports.insertMultiColumn = exports.handleInsertMultiColumn = exports.generateEmptyMultiColumn = void 0;
7
+ exports.updateColumnWidthOnDeletion = exports.updateColumnWidth = exports.insertMultiColumn = exports.handleInsertMultiColumn = exports.getCurrentPageWidth = exports.generateEmptyMultiColumn = void 0;
8
8
  var _slugid = _interopRequireDefault(require("slugid"));
9
9
  var _slate = require("@seafile/slate");
10
10
  var _slateReact = require("@seafile/slate-react");
@@ -40,7 +40,8 @@ const generateEmptyMultiColumn = (editor, MultiColumnType) => {
40
40
  default:
41
41
  break;
42
42
  }
43
- const initialColumnWidth = editor.width ? Math.max(_constants2.COLUMN_MIN_WIDTH, parseInt(editor.width / multiColumnNumber)) : _constants2.COLUMN_MIN_WIDTH;
43
+ const currentPageWidth = getCurrentPageWidth();
44
+ const initialColumnWidth = Math.max(_constants2.COLUMN_MIN_WIDTH, parseInt(currentPageWidth / multiColumnNumber));
44
45
  for (let i = 0; i < multiColumnNumber; i++) {
45
46
  const columnWidthKey = _slugid.default.nice();
46
47
  column.push({
@@ -143,7 +144,8 @@ const updateColumnWidthOnDeletion = (editor, selection, column, deletionDirectio
143
144
  const newMultiColumnNode = _slate.Node.get(editor, multiColumnPath);
144
145
  const targetColumnIndex = selection.anchor.path[1] + (deletionDirection === 'deleteForward' ? 1 : 0);
145
146
  const remainingColumn = column.filter((_, index) => index !== targetColumnIndex);
146
- const columnWidth = editor.width ? Math.max(_constants2.COLUMN_MIN_WIDTH, parseInt(editor.width / remainingColumn.length)) : _constants2.COLUMN_MIN_WIDTH;
147
+ const currentPageWidth = getCurrentPageWidth();
148
+ const columnWidth = Math.max(_constants2.COLUMN_MIN_WIDTH, parseInt(currentPageWidth / remainingColumn.length));
147
149
 
148
150
  // Recalculate width of every left column
149
151
  const newColumn = remainingColumn.map((column, index) => ({
@@ -153,4 +155,10 @@ const updateColumnWidthOnDeletion = (editor, selection, column, deletionDirectio
153
155
  }));
154
156
  updateColumnWidth(editor, newMultiColumnNode, newColumn, multiColumnPath);
155
157
  };
156
- exports.updateColumnWidthOnDeletion = updateColumnWidthOnDeletion;
158
+ exports.updateColumnWidthOnDeletion = updateColumnWidthOnDeletion;
159
+ const getCurrentPageWidth = () => {
160
+ const sdocEditorPage = document.getElementById('sdoc-editor');
161
+ const pageWidth = sdocEditorPage === null || sdocEditorPage === void 0 ? void 0 : sdocEditorPage.getBoundingClientRect().width;
162
+ return pageWidth;
163
+ };
164
+ exports.getCurrentPageWidth = getCurrentPageWidth;
@@ -8,8 +8,10 @@ Object.defineProperty(exports, "__esModule", {
8
8
  exports.default = void 0;
9
9
  var _react = _interopRequireWildcard(require("react"));
10
10
  var _classnames = _interopRequireDefault(require("classnames"));
11
+ var _slateReact = require("@seafile/slate-react");
11
12
  var _multiColumnRoot = _interopRequireDefault(require("./multi-column-root"));
12
13
  var _resizeHandlers = _interopRequireDefault(require("../resize-handlers"));
14
+ var _helper = require("../helper");
13
15
  require("./index.css");
14
16
  const MultiColumn = _ref => {
15
17
  let {
@@ -18,23 +20,53 @@ const MultiColumn = _ref => {
18
20
  children,
19
21
  element
20
22
  } = _ref;
23
+ const editor = (0, _slateReact.useSlateStatic)();
21
24
  const multiColumn = (0, _react.useRef)(null);
22
- const [column, setColumn] = (0, _react.useState)(element.column || []);
23
25
  const [style, setStyle] = (0, _react.useState)(element.style ? {
24
26
  ...element.style
25
27
  } : {});
26
28
  const multiColumnContainerClassName = (0, _classnames.default)('sdoc-multicolumn-container', className);
29
+ const [pageWidth, setPageWidth] = (0, _react.useState)((0, _helper.getCurrentPageWidth)());
27
30
  const handleResizeColumn = newColumn => {
28
- setColumn(newColumn);
31
+ (0, _helper.updateColumnWidth)(editor, element, newColumn);
29
32
  };
30
33
  (0, _react.useEffect)(() => {
31
- const columnWidthList = element.column.map(item => `${item.width}px`);
32
- const newStyle = {
33
- ...element.style,
34
- gridTemplateColumns: columnWidthList.join(' ')
34
+ const sdocEditorPage = document.getElementById('sdoc-editor');
35
+ if (!sdocEditorPage) return;
36
+ const resizeObserver = new ResizeObserver(entries => {
37
+ var _entries$;
38
+ const newPageWidth = (_entries$ = entries[0]) === null || _entries$ === void 0 ? void 0 : _entries$.contentRect.width;
39
+ // Check if sdocPageWidth changes
40
+ if (newPageWidth !== pageWidth) {
41
+ const scaleFactor = newPageWidth / pageWidth;
42
+ const updatedColumns = element.column.map(item => ({
43
+ ...item,
44
+ width: Math.round(item.width * scaleFactor)
45
+ }));
46
+ const columnWidthList = updatedColumns.map(item => `${item.width}px`);
47
+ const newStyle = {
48
+ ...element.style,
49
+ gridTemplateColumns: columnWidthList.join(' ')
50
+ };
51
+ setStyle(newStyle);
52
+ setPageWidth(newPageWidth);
53
+ (0, _helper.updateColumnWidth)(editor, element, updatedColumns);
54
+ } else {
55
+ const columnWidthList = element.column.map(item => `${item.width}px`);
56
+ const newStyle = {
57
+ ...element.style,
58
+ gridTemplateColumns: columnWidthList.join(' ')
59
+ };
60
+ setStyle(newStyle);
61
+ }
62
+ });
63
+ resizeObserver.observe(sdocEditorPage);
64
+ return () => {
65
+ resizeObserver.disconnect();
35
66
  };
36
- setStyle(newStyle);
37
- }, [element.style, element.column, column]);
67
+
68
+ // eslint-disable-next-line react-hooks/exhaustive-deps
69
+ }, [pageWidth, element.style, element.column]);
38
70
  return /*#__PURE__*/_react.default.createElement(_multiColumnRoot.default, {
39
71
  attributes: attributes
40
72
  }, /*#__PURE__*/_react.default.createElement("div", {
@@ -7,18 +7,16 @@ Object.defineProperty(exports, "__esModule", {
7
7
  exports.default = void 0;
8
8
  var _react = _interopRequireDefault(require("react"));
9
9
  var _classnames = _interopRequireDefault(require("classnames"));
10
- var _slateReact = require("@seafile/slate-react");
11
10
  const MultiColumnRoot = _ref => {
12
11
  let {
13
12
  attributes,
14
13
  children
15
14
  } = _ref;
16
- const editor = (0, _slateReact.useSlateStatic)();
17
15
  return /*#__PURE__*/_react.default.createElement("div", Object.assign({}, attributes, {
18
16
  className: (0, _classnames.default)('sdoc-multicolumn-wrapper position-relative', attributes.className),
19
17
  style: {
20
18
  ...attributes.style,
21
- maxWidth: editor.width ? editor.width : '100%'
19
+ maxWidth: '100%'
22
20
  }
23
21
  }), children);
24
22
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@seafile/sdoc-editor",
3
- "version": "1.0.203",
3
+ "version": "1.0.205",
4
4
  "private": false,
5
5
  "description": "This is a sdoc editor",
6
6
  "main": "dist/index.js",