@seafile/sdoc-editor 1.0.202-test-0.0.3 → 1.0.202-test-0.0.4

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 (7) hide show
  1. package/dist/basic-sdk/extension/plugins/multi-column/helper.js +3 -1
  2. package/dist/basic-sdk/extension/plugins/multi-column/render/index.css +0 -1
  3. package/dist/basic-sdk/extension/plugins/multi-column/render/index.js +51 -36
  4. package/dist/basic-sdk/extension/plugins/multi-column/render/multi-column-root.js +0 -1
  5. package/dist/basic-sdk/extension/plugins/multi-column/render/render-column.js +3 -4
  6. package/dist/basic-sdk/extension/plugins/multi-column/resize-handlers/index.js +7 -1
  7. package/package.json +1 -1
package/dist/basic-sdk/extension/plugins/multi-column/helper.js CHANGED
@@ -76,6 +76,7 @@ exports.generateEmptyMultiColumn = generateEmptyMultiColumn;
76
76
  const updateColumnWidth = (editor, element, column, newPath) => {
77
77
  const path = (0, _core.findPath)(editor, element, newPath);
78
78
  const gridTemplateColumns = column.map(column => `${column.width}px`).join(' ');
79
+ console.log(4, gridTemplateColumns);
79
80
  _slate.Transforms.setNodes(editor, {
80
81
  column: column,
81
82
  style: {
@@ -144,13 +145,14 @@ const updateColumnWidthOnDeletion = (editor, selection, column, deletionDirectio
144
145
  const targetColumnIndex = selection.anchor.path[1] + (deletionDirection === 'deleteForward' ? 1 : 0);
145
146
  const remainingColumn = column.filter((_, index) => index !== targetColumnIndex);
146
147
  const columnWidth = realTimePageWidth() ? Math.max(_constants2.COLUMN_MIN_WIDTH, parseInt(realTimePageWidth() / remainingColumn.length)) : _constants2.COLUMN_MIN_WIDTH;
147
-
148
+ console.log(1, remainingColumn);
148
149
  // Recalculate width of every left column
149
150
  const newColumn = remainingColumn.map((column, index) => ({
150
151
  ...column,
151
152
  left: index * columnWidth,
152
153
  width: columnWidth
153
154
  }));
155
+ console.log(2, newColumn);
154
156
  updateColumnWidth(editor, newMultiColumnNode, newColumn, multiColumnPath);
155
157
  };
156
158
  exports.updateColumnWidthOnDeletion = updateColumnWidthOnDeletion;
package/dist/basic-sdk/extension/plugins/multi-column/render/index.css CHANGED
@@ -37,7 +37,6 @@
37
37
  .sdoc-multicolumn-container .column-resize-handler {
38
38
  height: 100%;
39
39
  position: absolute;
40
- /* border: 1px solid red; */
41
40
  }
42
41
 
43
42
  .sdoc-multicolumn-container .column-resize-handler .column-width-just {
package/dist/basic-sdk/extension/plugins/multi-column/render/index.js CHANGED
@@ -12,6 +12,7 @@ var _multiColumnRoot = _interopRequireDefault(require("./multi-column-root"));
12
12
  var _resizeHandlers = _interopRequireDefault(require("../resize-handlers"));
13
13
  var _helper = require("../helper");
14
14
  require("./index.css");
15
+ var _slateReact = require("@seafile/slate-react");
15
16
  const MultiColumn = _ref => {
16
17
  let {
17
18
  className,
@@ -19,6 +20,7 @@ const MultiColumn = _ref => {
19
20
  children,
20
21
  element
21
22
  } = _ref;
23
+ const editor = (0, _slateReact.useSlateStatic)();
22
24
  const multiColumn = (0, _react.useRef)(null);
23
25
  const [column, setColumn] = (0, _react.useState)(element.column || []);
24
26
  const [style, setStyle] = (0, _react.useState)(element.style ? {
@@ -29,49 +31,62 @@ const MultiColumn = _ref => {
29
31
  const handleResizeColumn = newColumn => {
30
32
  setColumn(newColumn);
31
33
  };
34
+
35
+ // useEffect(() => {
36
+ // const columnWidthList = element.column.map(item => `${item.width}px`);
37
+ // console.log(54, element.column);
38
+ // setColumn(columnWidthList);
39
+ // }, [element.style]);
40
+
32
41
  (0, _react.useEffect)(() => {
33
- console.log('real', column);
34
- let columnWidthList = column.map(item => `${item.width}px`);
35
- console.log(0, columnWidthList);
42
+ let columnWidthList = element.column.map(item => `${item.width}px`);
36
43
  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
- } else {
57
- const newStyle = {
58
- ...element.style,
59
- gridTemplateColumns: columnWidthList.join(' ')
60
- };
61
- console.log(100, newStyle);
62
- setStyle(newStyle);
63
- }
64
- });
65
- resizeObserver.observe(sdocEditorPage);
66
- return () => {
67
- resizeObserver.disconnect();
68
- };
69
- }
44
+ if (!sdocEditorPage) return;
45
+ const resizeObserver = new ResizeObserver(entries => {
46
+ var _entries$;
47
+ const realTimeWidth = ((_entries$ = entries[0]) === null || _entries$ === void 0 ? void 0 : _entries$.contentRect.width) || (0, _helper.realTimePageWidth)();
48
+ // Check if pageWidth changes
49
+ if (realTimeWidth !== pageWidth) {
50
+ console.log(4444);
51
+ const scaleFactor = realTimeWidth / pageWidth;
52
+ console.log(5553, column);
53
+ const updatedColumns = column.map(item => ({
54
+ ...item,
55
+ width: Math.round(item.width * scaleFactor)
56
+ }));
57
+ columnWidthList = updatedColumns.map(item => `${item.width}px`);
58
+ const newStyle = {
59
+ ...element.style,
60
+ gridTemplateColumns: columnWidthList.join(' ')
61
+ };
62
+ setStyle(newStyle);
63
+ console.log(5554, updatedColumns);
64
+ setColumn(updatedColumns);
65
+ setPageWidth(realTimeWidth);
66
+ (0, _helper.updateColumnWidth)(editor, element, updatedColumns);
67
+ } else {
68
+ console.log(55555, columnWidthList);
69
+ const newStyle = {
70
+ ...element.style,
71
+ gridTemplateColumns: columnWidthList.join(' ')
72
+ };
73
+ // setColumn(columnWidthList);
74
+ console.log(5556, newStyle, element.column);
75
+ setColumn(element.column);
76
+ setStyle(newStyle);
77
+ }
78
+ });
79
+ resizeObserver.observe(sdocEditorPage);
80
+ return () => {
81
+ resizeObserver.disconnect();
82
+ };
70
83
  }, [pageWidth, element.style, element.column, column]);
71
84
 
72
85
  // useEffect(() => {
73
86
  // const columnWidthList = element.column.map(item => `${item.width}px`);
87
+ // console.log(55555, columnWidthList);
74
88
  // const newStyle = { ...element.style, gridTemplateColumns: columnWidthList.join(' ') };
89
+ // setColumn(element.column);
75
90
  // setStyle(newStyle);
76
91
  // }, [element.style, element.column, column]);
77
92
 
package/dist/basic-sdk/extension/plugins/multi-column/render/multi-column-root.js CHANGED
@@ -15,7 +15,6 @@ const MultiColumnRoot = _ref => {
15
15
  children
16
16
  } = _ref;
17
17
  const editor = (0, _slateReact.useSlateStatic)();
18
- console.log(33, (0, _helper.realTimePageWidth)());
19
18
  return /*#__PURE__*/_react.default.createElement("div", Object.assign({}, attributes, {
20
19
  className: (0, _classnames.default)('sdoc-multicolumn-wrapper position-relative', attributes.className),
21
20
  style: {
package/dist/basic-sdk/extension/plugins/multi-column/render/render-column.js CHANGED
@@ -18,7 +18,6 @@ const Column = _ref => {
18
18
  children
19
19
  } = _ref;
20
20
  const editor = (0, _slateReact.useSlateStatic)();
21
- console.log(1, attributes, element, children);
22
21
  const [columnWidth, setColumnWidth] = (0, _react.useState)(element.width || 0);
23
22
  const [pageWidth, setPageWidth] = (0, _react.useState)((0, _helper.realTimePageWidth)());
24
23
  const path = _slateReact.ReactEditor.findPath(editor, element);
@@ -31,9 +30,9 @@ const Column = _ref => {
31
30
  const realTimeWidth = entries[0].contentRect.width;
32
31
  if (realTimeWidth !== pageWidth) {
33
32
  console.log(55, realTimeWidth, pageWidth);
34
- const scaleFactor = realTimeWidth / pageWidth;
35
- setColumnWidth(preColumnwidth => preColumnwidth * scaleFactor);
36
- setPageWidth(realTimeWidth);
33
+ // const scaleFactor = realTimeWidth / pageWidth;
34
+ // setColumnWidth(preColumnwidth => preColumnwidth * scaleFactor);
35
+ // setPageWidth(realTimeWidth);
37
36
  }
38
37
  });
39
38
  resizeObserver.observe(sdocEditorPage);
package/dist/basic-sdk/extension/plugins/multi-column/resize-handlers/index.js CHANGED
@@ -42,8 +42,15 @@ const ResizeHandlers = _ref => {
42
42
 
43
43
  // Render when column element of multi_column node changes
44
44
  (0, _react.useEffect)(() => {
45
+ console.log(3, columnWidthList);
45
46
  setColumn(columnWidthList);
46
47
  }, [columnWidthList]);
48
+
49
+ // useEffect(() => {
50
+ // console.log(44, element.column)
51
+ // setColumn(element.column);
52
+ // }, [element.column]);
53
+
47
54
  (0, _react.useEffect)(() => {
48
55
  const path = _slateReact.ReactEditor.findPath(editor, element);
49
56
  const [node] = _slate.Editor.node(editor, path);
@@ -100,7 +107,6 @@ const ResizeHandlers = _ref => {
100
107
  ...column,
101
108
  left: column.width
102
109
  }));
103
- console.log(3333, newColumn);
104
110
  handleResizeColumn(newColumn);
105
111
  (0, _helper.updateColumnWidth)(editor, element, newColumn);
106
112
  setIsDraggingResizeHandler(false);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@seafile/sdoc-editor",
3
- "version": "1.0.202-test-0.0.3",
3
+ "version": "1.0.202-test-0.0.4",
4
4
  "private": false,
5
5
  "description": "This is a sdoc editor",
6
6
  "main": "dist/index.js",