@seafile/sdoc-editor 1.0.202-test-0.0.2 → 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 -2
  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 -35
  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 +10 -21
  6. package/dist/basic-sdk/extension/plugins/multi-column/resize-handlers/index.js +7 -0
  7. package/package.json +1 -1
package/dist/basic-sdk/extension/plugins/multi-column/helper.js CHANGED
@@ -52,7 +52,6 @@ const generateEmptyMultiColumn = (editor, MultiColumnType) => {
52
52
  id: columnWidthKey,
53
53
  type: _constants.ELEMENT_TYPE.COLUMN,
54
54
  width: columnWidth,
55
- initialPageWith: realTimePageWidth(),
56
55
  children: [{
57
56
  id: _slugid.default.nice(),
58
57
  type: _constants.PARAGRAPH,
@@ -77,6 +76,7 @@ exports.generateEmptyMultiColumn = generateEmptyMultiColumn;
77
76
  const updateColumnWidth = (editor, element, column, newPath) => {
78
77
  const path = (0, _core.findPath)(editor, element, newPath);
79
78
  const gridTemplateColumns = column.map(column => `${column.width}px`).join(' ');
79
+ console.log(4, gridTemplateColumns);
80
80
  _slate.Transforms.setNodes(editor, {
81
81
  column: column,
82
82
  style: {
@@ -145,13 +145,14 @@ const updateColumnWidthOnDeletion = (editor, selection, column, deletionDirectio
145
145
  const targetColumnIndex = selection.anchor.path[1] + (deletionDirection === 'deleteForward' ? 1 : 0);
146
146
  const remainingColumn = column.filter((_, index) => index !== targetColumnIndex);
147
147
  const columnWidth = realTimePageWidth() ? Math.max(_constants2.COLUMN_MIN_WIDTH, parseInt(realTimePageWidth() / remainingColumn.length)) : _constants2.COLUMN_MIN_WIDTH;
148
-
148
+ console.log(1, remainingColumn);
149
149
  // Recalculate width of every left column
150
150
  const newColumn = remainingColumn.map((column, index) => ({
151
151
  ...column,
152
152
  left: index * columnWidth,
153
153
  width: columnWidth
154
154
  }));
155
+ console.log(2, newColumn);
155
156
  updateColumnWidth(editor, newMultiColumnNode, newColumn, multiColumnPath);
156
157
  };
157
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,48 +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
- }
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
- }
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
+ };
69
83
  }, [pageWidth, element.style, element.column, column]);
70
84
 
71
85
  // useEffect(() => {
72
86
  // const columnWidthList = element.column.map(item => `${item.width}px`);
87
+ // console.log(55555, columnWidthList);
73
88
  // const newStyle = { ...element.style, gridTemplateColumns: columnWidthList.join(' ') };
89
+ // setColumn(element.column);
74
90
  // setStyle(newStyle);
75
91
  // }, [element.style, element.column, column]);
76
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);
@@ -30,34 +29,24 @@ const Column = _ref => {
30
29
  const resizeObserver = new ResizeObserver(entries => {
31
30
  const realTimeWidth = entries[0].contentRect.width;
32
31
  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);
32
+ console.log(55, realTimeWidth, pageWidth);
33
+ // const scaleFactor = realTimeWidth / pageWidth;
34
+ // setColumnWidth(preColumnwidth => preColumnwidth * scaleFactor);
35
+ // setPageWidth(realTimeWidth);
40
36
  }
41
37
  });
42
38
  resizeObserver.observe(sdocEditorPage);
43
39
  return () => {
44
40
  resizeObserver.disconnect();
45
41
  };
46
- } else {
47
- const matchingColumn = parentNode.column.find(column => column.key === element.id);
48
- if (matchingColumn) {
49
- setColumnWidth(matchingColumn.width);
50
- }
51
42
  }
52
43
  }, [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
-
44
+ (0, _react.useEffect)(() => {
45
+ const matchingColumn = parentNode.column.find(column => column.key === element.id);
46
+ if (matchingColumn) {
47
+ setColumnWidth(matchingColumn.width);
48
+ }
49
+ }, [editor, element, parentNode.column]);
61
50
  return /*#__PURE__*/_react.default.createElement("div", Object.assign({}, attributes, {
62
51
  className: (0, _classnames.default)('column', attributes.className),
63
52
  "data-id": element.id,
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);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@seafile/sdoc-editor",
3
- "version": "1.0.202-test-0.0.2",
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",