@seafile/sdoc-editor 1.0.201 → 1.0.202-test-0.1

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.
Files changed (8) hide show
  1. package/dist/basic-sdk/extension/plugins/multi-column/helper.js +10 -4
  2. package/dist/basic-sdk/extension/plugins/multi-column/render/index.css +6 -0
  3. package/dist/basic-sdk/extension/plugins/multi-column/render/index.js +48 -8
  4. package/dist/basic-sdk/extension/plugins/multi-column/render/multi-column-root.js +3 -1
  5. package/dist/basic-sdk/extension/plugins/multi-column/render/render-column.js +2 -1
  6. package/dist/basic-sdk/extension/plugins/multi-column/resize-handlers/index.js +5 -4
  7. package/dist/basic-sdk/extension/plugins/table/helpers.js +28 -2
  8. package/package.json +1 -1
package/dist/basic-sdk/extension/plugins/multi-column/helper.js CHANGED
@@ -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.realTimePageWidth = exports.insertMultiColumn = exports.handleInsertMultiColumn = 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,7 @@ 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 initialColumnWidth = realTimePageWidth() ? Math.max(_constants2.COLUMN_MIN_WIDTH, parseInt(realTimePageWidth() / multiColumnNumber)) : _constants2.COLUMN_MIN_WIDTH;
44
44
  for (let i = 0; i < multiColumnNumber; i++) {
45
45
  const columnWidthKey = _slugid.default.nice();
46
46
  column.push({
@@ -143,7 +143,7 @@ const updateColumnWidthOnDeletion = (editor, selection, column, deletionDirectio
143
143
  const newMultiColumnNode = _slate.Node.get(editor, multiColumnPath);
144
144
  const targetColumnIndex = selection.anchor.path[1] + (deletionDirection === 'deleteForward' ? 1 : 0);
145
145
  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;
146
+ const columnWidth = realTimePageWidth() ? Math.max(_constants2.COLUMN_MIN_WIDTH, parseInt(realTimePageWidth() / remainingColumn.length)) : _constants2.COLUMN_MIN_WIDTH;
147
147
 
148
148
  // Recalculate width of every left column
149
149
  const newColumn = remainingColumn.map((column, index) => ({
@@ -153,4 +153,10 @@ const updateColumnWidthOnDeletion = (editor, selection, column, deletionDirectio
153
153
  }));
154
154
  updateColumnWidth(editor, newMultiColumnNode, newColumn, multiColumnPath);
155
155
  };
156
- exports.updateColumnWidthOnDeletion = updateColumnWidthOnDeletion;
156
+ exports.updateColumnWidthOnDeletion = updateColumnWidthOnDeletion;
157
+ const realTimePageWidth = () => {
158
+ const sdocEditorPage = document.getElementById('sdoc-editor');
159
+ const pageWidth = sdocEditorPage === null || sdocEditorPage === void 0 ? void 0 : sdocEditorPage.getBoundingClientRect().width;
160
+ return pageWidth;
161
+ };
162
+ exports.realTimePageWidth = realTimePageWidth;
package/dist/basic-sdk/extension/plugins/multi-column/render/index.css CHANGED
@@ -11,6 +11,7 @@
11
11
  position: relative;
12
12
  display: grid;
13
13
  cursor: text;
14
+ /* border: 1px solid red; */
14
15
  }
15
16
 
16
17
  .sdoc-multicolumn-wrapper .column {
@@ -18,6 +19,7 @@
18
19
  left: 3px;
19
20
  line-height: 1.5;
20
21
  align-items: flex-start;
22
+ /* border: 1px solid red; */
21
23
  }
22
24
 
23
25
  .sdoc-column-container {
@@ -29,11 +31,13 @@
29
31
  box-sizing: border-box;
30
32
  word-wrap: break-word;
31
33
  white-space: pre-wrap;
34
+
32
35
  }
33
36
 
34
37
  .sdoc-multicolumn-container .column-resize-handler {
35
38
  height: 100%;
36
39
  position: absolute;
40
+ /* border: 1px solid red; */
37
41
  }
38
42
 
39
43
  .sdoc-multicolumn-container .column-resize-handler .column-width-just {
@@ -44,10 +48,12 @@
44
48
  margin-right: 1.5px;
45
49
  position: absolute;
46
50
  cursor: col-resize;
51
+ border: 1px solid red;
47
52
  }
48
53
 
49
54
  .sdoc-multicolumn-container .column-resize-handler .column-width-just.active,
50
55
  .sdoc-multicolumn-container .column-resize-handler .column-width-just:hover {
51
56
  background-color: lightgray;
52
57
  cursor: col-resize;
58
+ /* border: 1px solid red; */
53
59
  }
package/dist/basic-sdk/extension/plugins/multi-column/render/index.js CHANGED
@@ -10,6 +10,7 @@ var _react = _interopRequireWildcard(require("react"));
10
10
  var _classnames = _interopRequireDefault(require("classnames"));
11
11
  var _multiColumnRoot = _interopRequireDefault(require("./multi-column-root"));
12
12
  var _resizeHandlers = _interopRequireDefault(require("../resize-handlers"));
13
+ var _helper = require("../helper");
13
14
  require("./index.css");
14
15
  const MultiColumn = _ref => {
15
16
  let {
@@ -24,17 +25,55 @@ const MultiColumn = _ref => {
24
25
  ...element.style
25
26
  } : {});
26
27
  const multiColumnContainerClassName = (0, _classnames.default)('sdoc-multicolumn-container', className);
28
+ const [pageWidth, setPageWidth] = (0, _react.useState)((0, _helper.realTimePageWidth)());
27
29
  const handleResizeColumn = newColumn => {
28
30
  setColumn(newColumn);
29
31
  };
30
32
  (0, _react.useEffect)(() => {
31
- const columnWidthList = element.column.map(item => `${item.width}px`);
32
- const newStyle = {
33
- ...element.style,
34
- gridTemplateColumns: columnWidthList.join(' ')
35
- };
36
- setStyle(newStyle);
37
- }, [element.style, element.column, column]);
33
+ console.log('real', column);
34
+ let columnWidthList = column.map(item => `${item.width}px`);
35
+ console.log(0, columnWidthList);
36
+ const sdocEditorPage = document.getElementById('sdoc-editor');
37
+ if (sdocEditorPage) {
38
+ const resizeObserver = new ResizeObserver(entries => {
39
+ const realTimeWidth = entries[0].contentRect.width;
40
+ if (realTimeWidth !== pageWidth) {
41
+ const scaleFactor = realTimeWidth / pageWidth;
42
+ const updatedColumns = column.map(item => ({
43
+ ...item,
44
+ width: Math.round(item.width * scaleFactor)
45
+ }));
46
+ columnWidthList = updatedColumns.map(item => `${item.width}px`);
47
+ console.log(22, columnWidthList);
48
+ const newStyle = {
49
+ ...element.style,
50
+ gridTemplateColumns: columnWidthList.join(' ')
51
+ };
52
+ setStyle(newStyle);
53
+ console.log(4, updatedColumns);
54
+ setColumn(updatedColumns);
55
+ setPageWidth(realTimeWidth);
56
+ }
57
+ });
58
+ resizeObserver.observe(sdocEditorPage);
59
+ return () => {
60
+ resizeObserver.disconnect();
61
+ };
62
+ } else {
63
+ const newStyle = {
64
+ ...element.style,
65
+ gridTemplateColumns: columnWidthList.join(' ')
66
+ };
67
+ setStyle(newStyle);
68
+ }
69
+ }, [pageWidth, element.style, element.column, column]);
70
+
71
+ // useEffect(() => {
72
+ // const columnWidthList = element.column.map(item => `${item.width}px`);
73
+ // const newStyle = { ...element.style, gridTemplateColumns: columnWidthList.join(' ') };
74
+ // setStyle(newStyle);
75
+ // }, [element.style, element.column, column]);
76
+
38
77
  return /*#__PURE__*/_react.default.createElement(_multiColumnRoot.default, {
39
78
  attributes: attributes
40
79
  }, /*#__PURE__*/_react.default.createElement("div", {
@@ -44,7 +83,8 @@ const MultiColumn = _ref => {
44
83
  "data-id": element.id
45
84
  }, children, /*#__PURE__*/_react.default.createElement(_resizeHandlers.default, {
46
85
  element: element,
47
- handleResizeColumn: handleResizeColumn
86
+ handleResizeColumn: handleResizeColumn,
87
+ columnWidthList: column
48
88
  })));
49
89
  };
50
90
  function renderMultiColumn(props) {
package/dist/basic-sdk/extension/plugins/multi-column/render/multi-column-root.js CHANGED
@@ -8,17 +8,19 @@ exports.default = void 0;
8
8
  var _react = _interopRequireDefault(require("react"));
9
9
  var _classnames = _interopRequireDefault(require("classnames"));
10
10
  var _slateReact = require("@seafile/slate-react");
11
+ var _helper = require("../helper");
11
12
  const MultiColumnRoot = _ref => {
12
13
  let {
13
14
  attributes,
14
15
  children
15
16
  } = _ref;
16
17
  const editor = (0, _slateReact.useSlateStatic)();
18
+ console.log(33, (0, _helper.realTimePageWidth)());
17
19
  return /*#__PURE__*/_react.default.createElement("div", Object.assign({}, attributes, {
18
20
  className: (0, _classnames.default)('sdoc-multicolumn-wrapper position-relative', attributes.className),
19
21
  style: {
20
22
  ...attributes.style,
21
- maxWidth: editor.width ? editor.width : '100%'
23
+ maxWidth: (0, _helper.realTimePageWidth)() ? (0, _helper.realTimePageWidth)() : '100%'
22
24
  }
23
25
  }), children);
24
26
  };
package/dist/basic-sdk/extension/plugins/multi-column/render/render-column.js CHANGED
@@ -22,11 +22,12 @@ const Column = _ref => {
22
22
  const parentPath = _slate.Path.parent(path);
23
23
  const [parentNode] = _slate.Editor.node(editor, parentPath);
24
24
  (0, _react.useEffect)(() => {
25
+ console.log(555, parentNode.column);
25
26
  const matchingColumn = parentNode.column.find(column => column.key === element.id);
26
27
  if (matchingColumn) {
27
28
  setColumnWidth(matchingColumn.width);
28
29
  }
29
- }, [editor, element, parentNode.column]);
30
+ }, [editor, element, parentNode.column, columnWidth]);
30
31
  return /*#__PURE__*/_react.default.createElement("div", Object.assign({}, attributes, {
31
32
  className: (0, _classnames.default)('column', attributes.className),
32
33
  "data-id": element.id,
package/dist/basic-sdk/extension/plugins/multi-column/resize-handlers/index.js CHANGED
@@ -16,10 +16,11 @@ var _mouseEvent = require("../../../../utils/mouse-event");
16
16
  const ResizeHandlers = _ref => {
17
17
  let {
18
18
  element,
19
- handleResizeColumn
19
+ handleResizeColumn,
20
+ columnWidthList
20
21
  } = _ref;
21
22
  const editor = (0, _slateReact.useSlateStatic)();
22
- const [column, setColumn] = (0, _react.useState)(element.column);
23
+ const [column, setColumn] = (0, _react.useState)(columnWidthList);
23
24
  const [isDraggingResizeHandler, setIsDraggingResizeHandler] = (0, _react.useState)(false);
24
25
  const [adjustingCell, setAdjustingCell] = (0, _react.useState)(null);
25
26
  const [resizeInfo, setResizeInfo] = (0, _react.useState)({
@@ -41,8 +42,8 @@ const ResizeHandlers = _ref => {
41
42
 
42
43
  // Render when column element of multi_column node changes
43
44
  (0, _react.useEffect)(() => {
44
- setColumn(element.column);
45
- }, [element.column]);
45
+ setColumn(columnWidthList);
46
+ }, [columnWidthList]);
46
47
  (0, _react.useEffect)(() => {
47
48
  const path = _slateReact.ReactEditor.findPath(editor, element);
48
49
  const [node] = _slate.Editor.node(editor, path);
package/dist/basic-sdk/extension/plugins/table/helpers.js CHANGED
@@ -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.updateTableRowHeight = exports.updateColumnWidth = exports.splitCell = exports.setTableSelectedRange = exports.setTableFragmentData = exports.setCellStyle = exports.removeTableElement = exports.removeTable = exports.normalizeTableELement = exports.moveRows = exports.moveColumns = exports.isTableWidthFitScreen = exports.isTableMenuDisabled = exports.isTableLocation = exports.isSelectedAllCell = exports.isPreventResetTableSelectedRange = exports.isLastTableCell = exports.isInTableSameCell = exports.isInTable = exports.isHideDragHandlerLine = exports.isCursorAtCellStart = exports.isCursorAtCellEnd = exports.isCombineCellsDisabled = exports.isAllInTable = exports.insertTableRow = exports.insertTableElement = exports.insertTableColumn = exports.insertTableByTemplate = exports.insertTable = exports.insertMultipleRowsAndColumns = exports.handleInsertTable = exports.handleCombinedCellsBeforeDeleteTableRow = exports.handleCombinedCellsBeforeDeleteTableColumn = exports.handleCombinedCellsAfterInsertTableRow = exports.handleCombinedCellsAfterInsertTableColumn = exports.getTableSelectedRangeAfterDrag = exports.getTableRowSelectedRange = exports.getTableDragType = exports.getTableColumnsWidth = exports.getTableColumnsAfterInsertColumn = exports.getTableColumns = exports.getTableColumnSelectedRange = exports.getSelectedInfo = exports.getRowHeight = exports.getRowDomHeight = exports.getResizeMaskCellInfo = exports.getInsertPosition = exports.getHighlightClass = exports.getFirstTableCell = exports.getCellInheritStyles = exports.getCellHighlightClassName = exports.getCellColumn = exports.generateTableRow = exports.generateTableCell = exports.generateInheritStyle = exports.generateEmptyTable = exports.generateDragMoveElement = exports.focusClosestCellWhenJustifyCellSize = exports.focusCell = exports.fitTableColumnToScreen = exports.elementHasImage = exports.deleteTableSelectCells = exports.deleteTableRangeData = exports.deleteHandler = exports.combineCells = exports.colorBlend = exports.adjustCombinedCellRange = void 0;
7
+ exports.updateTableRowHeight = exports.updateColumnWidth = exports.syncRemoveTable = exports.splitCell = exports.setTableSelectedRange = exports.setTableFragmentData = exports.setCellStyle = exports.removeTableElement = exports.removeTable = exports.normalizeTableELement = exports.moveRows = exports.moveColumns = exports.isTableWidthFitScreen = exports.isTableMenuDisabled = exports.isTableLocation = exports.isSelectedAllCell = exports.isPreventResetTableSelectedRange = exports.isLastTableCell = exports.isInTableSameCell = exports.isInTable = exports.isHideDragHandlerLine = exports.isCursorAtCellStart = exports.isCursorAtCellEnd = exports.isCombineCellsDisabled = exports.isAllInTable = exports.insertTableRow = exports.insertTableElement = exports.insertTableColumn = exports.insertTableByTemplate = exports.insertTable = exports.insertMultipleRowsAndColumns = exports.handleInsertTable = exports.handleCombinedCellsBeforeDeleteTableRow = exports.handleCombinedCellsBeforeDeleteTableColumn = exports.handleCombinedCellsAfterInsertTableRow = exports.handleCombinedCellsAfterInsertTableColumn = exports.getTableSelectedRangeAfterDrag = exports.getTableRowSelectedRange = exports.getTableDragType = exports.getTableColumnsWidth = exports.getTableColumnsAfterInsertColumn = exports.getTableColumns = exports.getTableColumnSelectedRange = exports.getSelectedInfo = exports.getRowHeight = exports.getRowDomHeight = exports.getResizeMaskCellInfo = exports.getInsertPosition = exports.getHighlightClass = exports.getFirstTableCell = exports.getCellInheritStyles = exports.getCellHighlightClassName = exports.getCellColumn = exports.generateTableRow = exports.generateTableCell = exports.generateInheritStyle = exports.generateEmptyTable = exports.generateDragMoveElement = exports.focusClosestCellWhenJustifyCellSize = exports.focusCell = exports.fitTableColumnToScreen = exports.elementHasImage = exports.deleteTableSelectCells = exports.deleteTableRangeData = exports.deleteHandler = exports.combineCells = exports.colorBlend = exports.adjustCombinedCellRange = void 0;
8
8
  var _slugid = _interopRequireDefault(require("slugid"));
9
9
  var _slate = require("@seafile/slate");
10
10
  var _slateReact = require("@seafile/slate-react");
@@ -580,7 +580,7 @@ const splitCell = (editor, rowNumber, columnNumber) => {
580
580
  });
581
581
  };
582
582
  exports.splitCell = splitCell;
583
- const removeTable = (editor, path) => {
583
+ const syncRemoveTable = (editor, path) => {
584
584
  let validPath = path;
585
585
  if (!validPath) {
586
586
  const {
@@ -593,6 +593,32 @@ const removeTable = (editor, path) => {
593
593
  at: validPath
594
594
  });
595
595
  };
596
+ exports.syncRemoveTable = syncRemoveTable;
597
+ const removeTable = (editor, path) => {
598
+ let validPath = path;
599
+ if (!validPath) {
600
+ const {
601
+ tablePath
602
+ } = getSelectedInfo(editor);
603
+ validPath = tablePath;
604
+ }
605
+ editor.reSetTableSelectedRange();
606
+
607
+ // Clicking the menu causes the table to be re-rendered, and the deletion operation is performed synchronously. When rendering, it is found that the data is lost and an error is reported.
608
+ setTimeout(() => {
609
+ _slate.Transforms.removeNodes(editor, {
610
+ at: validPath
611
+ });
612
+ if (_slate.Editor.hasPath(editor, validPath)) {
613
+ const endOfLastNodePoint = _slate.Editor.end(editor, validPath);
614
+ const range = {
615
+ anchor: endOfLastNodePoint,
616
+ focus: endOfLastNodePoint
617
+ };
618
+ (0, _core.focusEditor)(editor, range);
619
+ }
620
+ }, 0);
621
+ };
596
622
  exports.removeTable = removeTable;
597
623
  const removeTableElement = (editor, type) => {
598
624
  const {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@seafile/sdoc-editor",
3
- "version": "1.0.201",
3
+ "version": "1.0.202-test-0.01",
4
4
  "private": false,
5
5
  "description": "This is a sdoc editor",
6
6
  "main": "dist/index.js",