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

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 +11 -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 +35 -4
  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({
@@ -52,6 +52,7 @@ const generateEmptyMultiColumn = (editor, MultiColumnType) => {
52
52
  id: columnWidthKey,
53
53
  type: _constants.ELEMENT_TYPE.COLUMN,
54
54
  width: columnWidth,
55
+ initialPageWith: realTimePageWidth(),
55
56
  children: [{
56
57
  id: _slugid.default.nice(),
57
58
  type: _constants.PARAGRAPH,
@@ -143,7 +144,7 @@ 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 columnWidth = realTimePageWidth() ? Math.max(_constants2.COLUMN_MIN_WIDTH, parseInt(realTimePageWidth() / remainingColumn.length)) : _constants2.COLUMN_MIN_WIDTH;
147
148
 
148
149
  // Recalculate width of every left column
149
150
  const newColumn = remainingColumn.map((column, index) => ({
@@ -153,4 +154,10 @@ const updateColumnWidthOnDeletion = (editor, selection, column, deletionDirectio
153
154
  }));
154
155
  updateColumnWidth(editor, newMultiColumnNode, newColumn, multiColumnPath);
155
156
  };
156
- exports.updateColumnWidthOnDeletion = updateColumnWidthOnDeletion;
157
+ exports.updateColumnWidthOnDeletion = updateColumnWidthOnDeletion;
158
+ const realTimePageWidth = () => {
159
+ const sdocEditorPage = document.getElementById('sdoc-editor');
160
+ const pageWidth = sdocEditorPage === null || sdocEditorPage === void 0 ? void 0 : sdocEditorPage.getBoundingClientRect().width;
161
+ return pageWidth;
162
+ };
163
+ 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
@@ -10,6 +10,7 @@ var _react = _interopRequireWildcard(require("react"));
10
10
  var _classnames = _interopRequireDefault(require("classnames"));
11
11
  var _slate = require("@seafile/slate");
12
12
  var _slateReact = require("@seafile/slate-react");
13
+ var _helper = require("../helper");
13
14
  const Column = _ref => {
14
15
  let {
15
16
  attributes,
@@ -17,16 +18,46 @@ const Column = _ref => {
17
18
  children
18
19
  } = _ref;
19
20
  const editor = (0, _slateReact.useSlateStatic)();
21
+ console.log(1, attributes, element, children);
20
22
  const [columnWidth, setColumnWidth] = (0, _react.useState)(element.width || 0);
23
+ const [pageWidth, setPageWidth] = (0, _react.useState)((0, _helper.realTimePageWidth)());
21
24
  const path = _slateReact.ReactEditor.findPath(editor, element);
22
25
  const parentPath = _slate.Path.parent(path);
23
26
  const [parentNode] = _slate.Editor.node(editor, parentPath);
24
27
  (0, _react.useEffect)(() => {
25
- const matchingColumn = parentNode.column.find(column => column.key === element.id);
26
- if (matchingColumn) {
27
- setColumnWidth(matchingColumn.width);
28
+ const sdocEditorPage = document.getElementById('sdoc-editor');
29
+ if (sdocEditorPage) {
30
+ const resizeObserver = new ResizeObserver(entries => {
31
+ const realTimeWidth = entries[0].contentRect.width;
32
+ if (realTimeWidth !== pageWidth) {
33
+ const scaleFactor = realTimeWidth / pageWidth;
34
+ const matchingColumn = parentNode.column.find(column => column.key === element.id);
35
+ if (matchingColumn) {
36
+ console.log(444444, matchingColumn.width, scaleFactor);
37
+ setColumnWidth(matchingColumn.width * scaleFactor);
38
+ }
39
+ setPageWidth(realTimeWidth);
40
+ }
41
+ });
42
+ resizeObserver.observe(sdocEditorPage);
43
+ return () => {
44
+ resizeObserver.disconnect();
45
+ };
46
+ } else {
47
+ const matchingColumn = parentNode.column.find(column => column.key === element.id);
48
+ if (matchingColumn) {
49
+ setColumnWidth(matchingColumn.width);
50
+ }
28
51
  }
29
- }, [editor, element, parentNode.column]);
52
+ }, [editor, element, parentNode.column, pageWidth]);
53
+
54
+ // useEffect(() => {
55
+ // const matchingColumn = parentNode.column.find(column => column.key === element.id);
56
+ // if (matchingColumn) {
57
+ // setColumnWidth(matchingColumn.width);
58
+ // }
59
+ // }, [editor, element, parentNode.column]);
60
+
30
61
  return /*#__PURE__*/_react.default.createElement("div", Object.assign({}, attributes, {
31
62
  className: (0, _classnames.default)('column', attributes.className),
32
63
  "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.0.2",
4
4
  "private": false,
5
5
  "description": "This is a sdoc editor",
6
6
  "main": "dist/index.js",