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

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.
@@ -51,7 +51,7 @@ const AddLinkDialog = _ref => {
51
51
  setLinkErrorMessage(t('The_link_address_is_invalid'));
52
52
  return;
53
53
  }
54
- const isEdit = oldURL && oldTitle;
54
+ const isEdit = oldURL || oldTitle;
55
55
  if (isEdit) {
56
56
  (0, _helpers.updateLink)(editor, title, url);
57
57
  } else {
@@ -100,7 +100,7 @@ const AddLinkDialog = _ref => {
100
100
  type: "url",
101
101
  className: "form-control",
102
102
  id: "addLink",
103
- value: url,
103
+ value: url || '',
104
104
  onChange: handleUrlChange
105
105
  }), linkErrorMessage && /*#__PURE__*/_react.default.createElement(_reactstrap.Alert, {
106
106
  color: "danger",
@@ -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.realTimePageWidth = exports.insertMultiColumn = exports.handleInsertMultiColumn = exports.generateEmptyMultiColumn = void 0;
7
+ exports.updateColumnWidthOnDeletion = exports.updateColumnWidth = 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 = realTimePageWidth() ? Math.max(_constants2.COLUMN_MIN_WIDTH, parseInt(realTimePageWidth() / multiColumnNumber)) : _constants2.COLUMN_MIN_WIDTH;
43
+ const initialColumnWidth = editor.width ? Math.max(_constants2.COLUMN_MIN_WIDTH, parseInt(editor.width / 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 = realTimePageWidth() ? Math.max(_constants2.COLUMN_MIN_WIDTH, parseInt(realTimePageWidth() / remainingColumn.length)) : _constants2.COLUMN_MIN_WIDTH;
146
+ const columnWidth = editor.width ? Math.max(_constants2.COLUMN_MIN_WIDTH, parseInt(editor.width / 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,10 +153,4 @@ const updateColumnWidthOnDeletion = (editor, selection, column, deletionDirectio
153
153
  }));
154
154
  updateColumnWidth(editor, newMultiColumnNode, newColumn, multiColumnPath);
155
155
  };
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;
156
+ exports.updateColumnWidthOnDeletion = updateColumnWidthOnDeletion;
@@ -11,7 +11,6 @@
11
11
  position: relative;
12
12
  display: grid;
13
13
  cursor: text;
14
- /* border: 1px solid red; */
15
14
  }
16
15
 
17
16
  .sdoc-multicolumn-wrapper .column {
@@ -19,7 +18,6 @@
19
18
  left: 3px;
20
19
  line-height: 1.5;
21
20
  align-items: flex-start;
22
- /* border: 1px solid red; */
23
21
  }
24
22
 
25
23
  .sdoc-column-container {
@@ -31,13 +29,11 @@
31
29
  box-sizing: border-box;
32
30
  word-wrap: break-word;
33
31
  white-space: pre-wrap;
34
-
35
32
  }
36
33
 
37
34
  .sdoc-multicolumn-container .column-resize-handler {
38
35
  height: 100%;
39
36
  position: absolute;
40
- /* border: 1px solid red; */
41
37
  }
42
38
 
43
39
  .sdoc-multicolumn-container .column-resize-handler .column-width-just {
@@ -48,12 +44,10 @@
48
44
  margin-right: 1.5px;
49
45
  position: absolute;
50
46
  cursor: col-resize;
51
- border: 1px solid red;
52
47
  }
53
48
 
54
49
  .sdoc-multicolumn-container .column-resize-handler .column-width-just.active,
55
50
  .sdoc-multicolumn-container .column-resize-handler .column-width-just:hover {
56
51
  background-color: lightgray;
57
52
  cursor: col-resize;
58
- /* border: 1px solid red; */
59
53
  }
@@ -10,7 +10,6 @@ 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");
14
13
  require("./index.css");
15
14
  const MultiColumn = _ref => {
16
15
  let {
@@ -25,56 +24,17 @@ const MultiColumn = _ref => {
25
24
  ...element.style
26
25
  } : {});
27
26
  const multiColumnContainerClassName = (0, _classnames.default)('sdoc-multicolumn-container', className);
28
- const [pageWidth, setPageWidth] = (0, _react.useState)((0, _helper.realTimePageWidth)());
29
27
  const handleResizeColumn = newColumn => {
30
28
  setColumn(newColumn);
31
29
  };
32
30
  (0, _react.useEffect)(() => {
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
- } 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
- }
70
- }, [pageWidth, element.style, element.column, column]);
71
-
72
- // useEffect(() => {
73
- // const columnWidthList = element.column.map(item => `${item.width}px`);
74
- // const newStyle = { ...element.style, gridTemplateColumns: columnWidthList.join(' ') };
75
- // setStyle(newStyle);
76
- // }, [element.style, element.column, column]);
77
-
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]);
78
38
  return /*#__PURE__*/_react.default.createElement(_multiColumnRoot.default, {
79
39
  attributes: attributes
80
40
  }, /*#__PURE__*/_react.default.createElement("div", {
@@ -84,8 +44,7 @@ const MultiColumn = _ref => {
84
44
  "data-id": element.id
85
45
  }, children, /*#__PURE__*/_react.default.createElement(_resizeHandlers.default, {
86
46
  element: element,
87
- handleResizeColumn: handleResizeColumn,
88
- columnWidthList: column
47
+ handleResizeColumn: handleResizeColumn
89
48
  })));
90
49
  };
91
50
  function renderMultiColumn(props) {
@@ -8,19 +8,17 @@ 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");
12
11
  const MultiColumnRoot = _ref => {
13
12
  let {
14
13
  attributes,
15
14
  children
16
15
  } = _ref;
17
16
  const editor = (0, _slateReact.useSlateStatic)();
18
- console.log(33, (0, _helper.realTimePageWidth)());
19
17
  return /*#__PURE__*/_react.default.createElement("div", Object.assign({}, attributes, {
20
18
  className: (0, _classnames.default)('sdoc-multicolumn-wrapper position-relative', attributes.className),
21
19
  style: {
22
20
  ...attributes.style,
23
- maxWidth: (0, _helper.realTimePageWidth)() ? (0, _helper.realTimePageWidth)() : '100%'
21
+ maxWidth: editor.width ? editor.width : '100%'
24
22
  }
25
23
  }), children);
26
24
  };
@@ -10,7 +10,6 @@ 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");
14
13
  const Column = _ref => {
15
14
  let {
16
15
  attributes,
@@ -18,30 +17,10 @@ const Column = _ref => {
18
17
  children
19
18
  } = _ref;
20
19
  const editor = (0, _slateReact.useSlateStatic)();
21
- console.log(1, attributes, element, children);
22
20
  const [columnWidth, setColumnWidth] = (0, _react.useState)(element.width || 0);
23
- const [pageWidth, setPageWidth] = (0, _react.useState)((0, _helper.realTimePageWidth)());
24
21
  const path = _slateReact.ReactEditor.findPath(editor, element);
25
22
  const parentPath = _slate.Path.parent(path);
26
23
  const [parentNode] = _slate.Editor.node(editor, parentPath);
27
- (0, _react.useEffect)(() => {
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
- console.log(55, realTimeWidth, pageWidth);
34
- const scaleFactor = realTimeWidth / pageWidth;
35
- setColumnWidth(preColumnwidth => preColumnwidth * scaleFactor);
36
- setPageWidth(realTimeWidth);
37
- }
38
- });
39
- resizeObserver.observe(sdocEditorPage);
40
- return () => {
41
- resizeObserver.disconnect();
42
- };
43
- }
44
- }, [editor, element, parentNode.column, pageWidth]);
45
24
  (0, _react.useEffect)(() => {
46
25
  const matchingColumn = parentNode.column.find(column => column.key === element.id);
47
26
  if (matchingColumn) {
@@ -16,11 +16,10 @@ var _mouseEvent = require("../../../../utils/mouse-event");
16
16
  const ResizeHandlers = _ref => {
17
17
  let {
18
18
  element,
19
- handleResizeColumn,
20
- columnWidthList
19
+ handleResizeColumn
21
20
  } = _ref;
22
21
  const editor = (0, _slateReact.useSlateStatic)();
23
- const [column, setColumn] = (0, _react.useState)(columnWidthList);
22
+ const [column, setColumn] = (0, _react.useState)(element.column);
24
23
  const [isDraggingResizeHandler, setIsDraggingResizeHandler] = (0, _react.useState)(false);
25
24
  const [adjustingCell, setAdjustingCell] = (0, _react.useState)(null);
26
25
  const [resizeInfo, setResizeInfo] = (0, _react.useState)({
@@ -42,8 +41,8 @@ const ResizeHandlers = _ref => {
42
41
 
43
42
  // Render when column element of multi_column node changes
44
43
  (0, _react.useEffect)(() => {
45
- setColumn(columnWidthList);
46
- }, [columnWidthList]);
44
+ setColumn(element.column);
45
+ }, [element.column]);
47
46
  (0, _react.useEffect)(() => {
48
47
  const path = _slateReact.ReactEditor.findPath(editor, element);
49
48
  const [node] = _slate.Editor.node(editor, path);
@@ -100,7 +99,6 @@ const ResizeHandlers = _ref => {
100
99
  ...column,
101
100
  left: column.width
102
101
  }));
103
- console.log(3333, newColumn);
104
102
  handleResizeColumn(newColumn);
105
103
  (0, _helper.updateColumnWidth)(editor, element, newColumn);
106
104
  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.203",
4
4
  "private": false,
5
5
  "description": "This is a sdoc editor",
6
6
  "main": "dist/index.js",