@atlaskit/renderer 101.0.1 → 101.1.0
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.
- package/CHANGELOG.md +27 -0
- package/dist/cjs/messages.js +4 -17
- package/dist/cjs/react/nodes/codeBlockCopyButton.js +1 -1
- package/dist/cjs/react/nodes/table/colgroup.js +5 -34
- package/dist/cjs/react/nodes/table.js +3 -3
- package/dist/cjs/render-document.js +1 -1
- package/dist/cjs/ui/Renderer/index.js +66 -5
- package/dist/cjs/version.json +1 -1
- package/dist/es2019/messages.js +2 -14
- package/dist/es2019/react/nodes/codeBlockCopyButton.js +1 -1
- package/dist/es2019/react/nodes/table/colgroup.js +5 -30
- package/dist/es2019/react/nodes/table.js +2 -2
- package/dist/es2019/render-document.js +1 -1
- package/dist/es2019/ui/Renderer/index.js +70 -6
- package/dist/es2019/version.json +1 -1
- package/dist/esm/messages.js +2 -14
- package/dist/esm/react/nodes/codeBlockCopyButton.js +1 -1
- package/dist/esm/react/nodes/table/colgroup.js +5 -29
- package/dist/esm/react/nodes/table.js +2 -2
- package/dist/esm/render-document.js +1 -1
- package/dist/esm/ui/Renderer/index.js +68 -6
- package/dist/esm/version.json +1 -1
- package/dist/types/messages.d.ts +0 -12
- package/dist/types/react/nodes/table/colgroup.d.ts +0 -6
- package/dist/types/ui/Renderer/index.d.ts +1 -0
- package/package.json +14 -14
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,32 @@
|
|
|
1
1
|
# @atlaskit/renderer
|
|
2
2
|
|
|
3
|
+
## 101.1.0
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- [`8308bf30800`](https://bitbucket.org/atlassian/atlassian-frontend/commits/8308bf30800) - [ux] ED-14862: Fix triple click selection in table cells in Renderer so that copy paste doesnt always copy a whole table cell with selected content
|
|
8
|
+
- [`d7c4506066d`](https://bitbucket.org/atlassian/atlassian-frontend/commits/d7c4506066d) - [ux][ed-15295] improve code block copy button label to better indicate to users what will end up in the clipboard when used.
|
|
9
|
+
|
|
10
|
+
### Patch Changes
|
|
11
|
+
|
|
12
|
+
- [`1a559c9fb1f`](https://bitbucket.org/atlassian/atlassian-frontend/commits/1a559c9fb1f) - [ux][ed-15168] PR 2 removes scale down logic from table columns in renderer
|
|
13
|
+
- [`5fd9cd8ae25`](https://bitbucket.org/atlassian/atlassian-frontend/commits/5fd9cd8ae25) - PCC-583 Fixing duplicated i18n messages ids
|
|
14
|
+
- [`85417020bac`](https://bitbucket.org/atlassian/atlassian-frontend/commits/85417020bac) - [ED-15173] removed uses of calcLineLength
|
|
15
|
+
- Updated dependencies
|
|
16
|
+
|
|
17
|
+
## 101.0.3
|
|
18
|
+
|
|
19
|
+
### Patch Changes
|
|
20
|
+
|
|
21
|
+
- Updated dependencies
|
|
22
|
+
|
|
23
|
+
## 101.0.2
|
|
24
|
+
|
|
25
|
+
### Patch Changes
|
|
26
|
+
|
|
27
|
+
- [`8d4228767b0`](https://bitbucket.org/atlassian/atlassian-frontend/commits/8d4228767b0) - Upgrade Typescript from `4.2.4` to `4.3.5`.
|
|
28
|
+
- Updated dependencies
|
|
29
|
+
|
|
3
30
|
## 101.0.1
|
|
4
31
|
|
|
5
32
|
### Patch Changes
|
package/dist/cjs/messages.js
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.tableCellMessages = exports.sortingIconMessages = exports.headingAnchorLinkMessages =
|
|
6
|
+
exports.tableCellMessages = exports.sortingIconMessages = exports.headingAnchorLinkMessages = void 0;
|
|
7
7
|
|
|
8
8
|
var _reactIntlNext = require("react-intl-next");
|
|
9
9
|
|
|
@@ -42,7 +42,7 @@ var tableCellMessages = (0, _reactIntlNext.defineMessages)({
|
|
|
42
42
|
description: 'this table column is sorted in ascending order'
|
|
43
43
|
},
|
|
44
44
|
descSortingLabel: {
|
|
45
|
-
id: 'fabric.editor.headingLink.
|
|
45
|
+
id: 'fabric.editor.headingLink.descSortingLabel',
|
|
46
46
|
defaultMessage: 'descending',
|
|
47
47
|
description: 'this table column is sorted in descending order'
|
|
48
48
|
}
|
|
@@ -65,22 +65,9 @@ var sortingIconMessages = (0, _reactIntlNext.defineMessages)({
|
|
|
65
65
|
description: 'clear the sorting from this column'
|
|
66
66
|
},
|
|
67
67
|
invalidLabel: {
|
|
68
|
-
id: 'fabric.editor.headingLink.
|
|
68
|
+
id: 'fabric.editor.headingLink.invalidLabel',
|
|
69
69
|
defaultMessage: "\u26A0\uFE0F You can't sort a table with merged cell",
|
|
70
70
|
description: 'this sort is invalid for merged cells'
|
|
71
71
|
}
|
|
72
72
|
});
|
|
73
|
-
exports.sortingIconMessages = sortingIconMessages;
|
|
74
|
-
var codeBlockCopyButtonMessages = (0, _reactIntlNext.defineMessages)({
|
|
75
|
-
copyCodeToClipboard: {
|
|
76
|
-
id: 'fabric.editor.codeBlockCopyButton.copyToClipboard',
|
|
77
|
-
defaultMessage: 'Copy',
|
|
78
|
-
description: 'Copy the whole content of the element to your clipboard'
|
|
79
|
-
},
|
|
80
|
-
copiedCodeToClipboard: {
|
|
81
|
-
id: 'fabric.editor.codeBlockCopyButton.copiedToClipboard',
|
|
82
|
-
defaultMessage: 'Copied!',
|
|
83
|
-
description: 'Copied the whole content of the element to clipboard'
|
|
84
|
-
}
|
|
85
|
-
});
|
|
86
|
-
exports.codeBlockCopyButtonMessages = codeBlockCopyButtonMessages;
|
|
73
|
+
exports.sortingIconMessages = sortingIconMessages;
|
|
@@ -29,7 +29,7 @@ var _colors = require("@atlaskit/theme/colors");
|
|
|
29
29
|
|
|
30
30
|
var _clipboard = require("../utils/clipboard");
|
|
31
31
|
|
|
32
|
-
var _messages = require("
|
|
32
|
+
var _messages = require("@atlaskit/editor-common/messages");
|
|
33
33
|
|
|
34
34
|
var _tokens = require("@atlaskit/tokens");
|
|
35
35
|
|
|
@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
|
|
|
5
5
|
Object.defineProperty(exports, "__esModule", {
|
|
6
6
|
value: true
|
|
7
7
|
});
|
|
8
|
-
exports.
|
|
8
|
+
exports.Colgroup = void 0;
|
|
9
9
|
|
|
10
10
|
var _react = _interopRequireDefault(require("react"));
|
|
11
11
|
|
|
@@ -13,11 +13,6 @@ var _styles = require("@atlaskit/editor-common/styles");
|
|
|
13
13
|
|
|
14
14
|
var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
|
|
15
15
|
|
|
16
|
-
var _breakoutSsr = require("../../../ui/Renderer/breakout-ssr");
|
|
17
|
-
|
|
18
|
-
// we allow scaling down column widths by no more than 15%
|
|
19
|
-
var MAX_SCALING_PERCENT = 0.15;
|
|
20
|
-
|
|
21
16
|
var getTableLayoutWidth = function getTableLayoutWidth(layout, opts) {
|
|
22
17
|
switch (layout) {
|
|
23
18
|
case 'full-width':
|
|
@@ -27,7 +22,7 @@ var getTableLayoutWidth = function getTableLayoutWidth(layout, opts) {
|
|
|
27
22
|
return _editorSharedStyles.akEditorWideLayoutWidth;
|
|
28
23
|
|
|
29
24
|
default:
|
|
30
|
-
return
|
|
25
|
+
return _editorSharedStyles.akEditorDefaultLayoutWidth;
|
|
31
26
|
}
|
|
32
27
|
};
|
|
33
28
|
|
|
@@ -38,31 +33,15 @@ var isTableResized = function isTableResized(columnWidths) {
|
|
|
38
33
|
return !!filteredWidths.length;
|
|
39
34
|
};
|
|
40
35
|
|
|
41
|
-
var fixColumnWidth = function fixColumnWidth(columnWidth, _tableWidth, _layoutWidth, zeroWidthColumnsCount
|
|
36
|
+
var fixColumnWidth = function fixColumnWidth(columnWidth, _tableWidth, _layoutWidth, zeroWidthColumnsCount) {
|
|
42
37
|
if (columnWidth === 0) {
|
|
43
38
|
return columnWidth;
|
|
44
|
-
} // If the tables total width (including no zero widths col or cols without width) is less than the current layout
|
|
45
|
-
// We scale up the columns to meet the minimum of the table layout.
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
if (zeroWidthColumnsCount === 0 && scaleDownPercent) {
|
|
49
|
-
return Math.floor((1 - scaleDownPercent) * columnWidth);
|
|
50
39
|
}
|
|
51
40
|
|
|
52
41
|
return Math.max( // We need to take tableCellBorderWidth, to avoid unneccesary overflow.
|
|
53
42
|
columnWidth - _styles.tableCellBorderWidth, zeroWidthColumnsCount ? _editorSharedStyles.akEditorTableLegacyCellMinWidth : _styles.tableCellMinWidth);
|
|
54
43
|
};
|
|
55
44
|
|
|
56
|
-
var calcScalePercent = function calcScalePercent(_ref) {
|
|
57
|
-
var renderWidth = _ref.renderWidth,
|
|
58
|
-
tableWidth = _ref.tableWidth,
|
|
59
|
-
maxScale = _ref.maxScale;
|
|
60
|
-
var diffPercent = 1 - renderWidth / tableWidth;
|
|
61
|
-
return diffPercent < maxScale ? diffPercent : maxScale;
|
|
62
|
-
};
|
|
63
|
-
|
|
64
|
-
exports.calcScalePercent = calcScalePercent;
|
|
65
|
-
|
|
66
45
|
var Colgroup = function Colgroup(props) {
|
|
67
46
|
var columnWidths = props.columnWidths,
|
|
68
47
|
layout = props.layout,
|
|
@@ -97,21 +76,13 @@ var Colgroup = function Colgroup(props) {
|
|
|
97
76
|
|
|
98
77
|
minTableWidth += Math.ceil(width) || _editorSharedStyles.akEditorTableLegacyCellMinWidth;
|
|
99
78
|
});
|
|
100
|
-
var cellMinWidth = 0;
|
|
101
|
-
var scaleDownPercent = 0; // fixes migration tables with zero-width columns
|
|
79
|
+
var cellMinWidth = 0; // fixes migration tables with zero-width columns
|
|
102
80
|
|
|
103
81
|
if (zeroWidthColumnsCount > 0) {
|
|
104
82
|
if (minTableWidth > maxTableWidth) {
|
|
105
83
|
var minWidth = Math.ceil((maxTableWidth - tableWidth) / zeroWidthColumnsCount);
|
|
106
84
|
cellMinWidth = minWidth < _editorSharedStyles.akEditorTableLegacyCellMinWidth ? _editorSharedStyles.akEditorTableLegacyCellMinWidth : minWidth;
|
|
107
85
|
}
|
|
108
|
-
} // scaling down
|
|
109
|
-
else if (renderWidth < tableWidth) {
|
|
110
|
-
scaleDownPercent = calcScalePercent({
|
|
111
|
-
renderWidth: renderWidth,
|
|
112
|
-
tableWidth: tableWidth,
|
|
113
|
-
maxScale: MAX_SCALING_PERCENT
|
|
114
|
-
});
|
|
115
86
|
}
|
|
116
87
|
|
|
117
88
|
return /*#__PURE__*/_react.default.createElement("colgroup", null, isNumberColumnEnabled && /*#__PURE__*/_react.default.createElement("col", {
|
|
@@ -119,7 +90,7 @@ var Colgroup = function Colgroup(props) {
|
|
|
119
90
|
width: _editorSharedStyles.akEditorTableNumberColumnWidth
|
|
120
91
|
}
|
|
121
92
|
}), columnWidths.map(function (colWidth, idx) {
|
|
122
|
-
var width = fixColumnWidth(colWidth, minTableWidth, maxTableWidth, zeroWidthColumnsCount
|
|
93
|
+
var width = fixColumnWidth(colWidth, minTableWidth, maxTableWidth, zeroWidthColumnsCount) || cellMinWidth;
|
|
123
94
|
var style = width ? {
|
|
124
95
|
width: "".concat(width, "px")
|
|
125
96
|
} : {};
|
|
@@ -39,12 +39,12 @@ var _tableCell = require("./tableCell");
|
|
|
39
39
|
|
|
40
40
|
var _SmartCardStorage = require("../../ui/SmartCardStorage");
|
|
41
41
|
|
|
42
|
-
var _breakoutSsr = require("../../ui/Renderer/breakout-ssr");
|
|
43
|
-
|
|
44
42
|
var _sticky = require("./table/sticky");
|
|
45
43
|
|
|
46
44
|
var _table = require("./table/table");
|
|
47
45
|
|
|
46
|
+
var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
|
|
47
|
+
|
|
48
48
|
function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
|
|
49
49
|
|
|
50
50
|
function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
|
|
@@ -312,7 +312,7 @@ var TableContainer = /*#__PURE__*/function (_React$Component) {
|
|
|
312
312
|
tableNode = _this$props.tableNode;
|
|
313
313
|
var stickyMode = this.state.stickyMode;
|
|
314
314
|
var tableWidth = (0, _styles.calcTableWidth)(layout, renderWidth, false);
|
|
315
|
-
var lineLength =
|
|
315
|
+
var lineLength = _editorSharedStyles.akEditorDefaultLayoutWidth;
|
|
316
316
|
var left;
|
|
317
317
|
|
|
318
318
|
if (canUseLinelength(this.props.rendererAppearance) && tableWidth !== 'inherit') {
|
|
@@ -147,7 +147,7 @@ var _createNodeAndCheck = function _createNodeAndCheck(schema, doc, dispatchAnal
|
|
|
147
147
|
actionSubject: _enums.ACTION_SUBJECT.RENDERER,
|
|
148
148
|
attributes: {
|
|
149
149
|
platform: _events.PLATFORM.WEB,
|
|
150
|
-
|
|
150
|
+
errorStack: err === null || err === void 0 ? void 0 : err.toString()
|
|
151
151
|
},
|
|
152
152
|
eventType: _enums.EVENT_TYPE.OPERATIONAL
|
|
153
153
|
});
|
|
@@ -102,7 +102,7 @@ exports.NORMAL_SEVERITY_THRESHOLD = NORMAL_SEVERITY_THRESHOLD;
|
|
|
102
102
|
var DEGRADED_SEVERITY_THRESHOLD = 3000;
|
|
103
103
|
exports.DEGRADED_SEVERITY_THRESHOLD = DEGRADED_SEVERITY_THRESHOLD;
|
|
104
104
|
var packageName = "@atlaskit/renderer";
|
|
105
|
-
var packageVersion = "101.0
|
|
105
|
+
var packageVersion = "101.1.0";
|
|
106
106
|
|
|
107
107
|
var Renderer = /*#__PURE__*/function (_PureComponent) {
|
|
108
108
|
(0, _inherits2.default)(Renderer, _PureComponent);
|
|
@@ -145,6 +145,62 @@ var Renderer = /*#__PURE__*/function (_PureComponent) {
|
|
|
145
145
|
var windowSelection = window.getSelection();
|
|
146
146
|
_this.mouseDownSelection = windowSelection !== null ? windowSelection.toString() : undefined;
|
|
147
147
|
});
|
|
148
|
+
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleMouseTripleClickInTables", function (event) {
|
|
149
|
+
var _parentElement, _parentElement2;
|
|
150
|
+
|
|
151
|
+
if (_utils.browser.ios || _utils.browser.android) {
|
|
152
|
+
return;
|
|
153
|
+
}
|
|
154
|
+
|
|
155
|
+
var badBrowser = _utils.browser.chrome || _utils.browser.safari;
|
|
156
|
+
var tripleClick = event.detail >= 3;
|
|
157
|
+
|
|
158
|
+
if (!(badBrowser && tripleClick)) {
|
|
159
|
+
return;
|
|
160
|
+
}
|
|
161
|
+
|
|
162
|
+
var selection = window.getSelection();
|
|
163
|
+
|
|
164
|
+
if (!selection) {
|
|
165
|
+
return;
|
|
166
|
+
}
|
|
167
|
+
|
|
168
|
+
var type = selection.type,
|
|
169
|
+
anchorNode = selection.anchorNode,
|
|
170
|
+
focusNode = selection.focusNode;
|
|
171
|
+
var rangeSelection = Boolean(type === 'Range' && anchorNode && focusNode);
|
|
172
|
+
|
|
173
|
+
if (!rangeSelection) {
|
|
174
|
+
return;
|
|
175
|
+
}
|
|
176
|
+
|
|
177
|
+
var target = event.target;
|
|
178
|
+
var tableCell = target.closest('td,th');
|
|
179
|
+
var clickedInCell = Boolean(tableCell);
|
|
180
|
+
|
|
181
|
+
if (!clickedInCell) {
|
|
182
|
+
return;
|
|
183
|
+
}
|
|
184
|
+
|
|
185
|
+
var anchorInCell = tableCell.contains(anchorNode);
|
|
186
|
+
var focusInCell = tableCell.contains(focusNode);
|
|
187
|
+
var selectionStartsOrEndsOutsideClickedCell = !(anchorInCell && focusInCell);
|
|
188
|
+
|
|
189
|
+
if (!selectionStartsOrEndsOutsideClickedCell) {
|
|
190
|
+
return;
|
|
191
|
+
} // If selection starts or ends in a different cell than the clicked cell,
|
|
192
|
+
// we select the node inside the clicked cell (or if both are in a different
|
|
193
|
+
// cell, we select the cell's contents instead). We want to select the nearest
|
|
194
|
+
// parent block, so that a whole line of text/content is selected (rather than
|
|
195
|
+
// selecting a span that would select one specific chunk of text).
|
|
196
|
+
|
|
197
|
+
|
|
198
|
+
var elementToSelect = anchorInCell ? (_parentElement = anchorNode.parentElement) === null || _parentElement === void 0 ? void 0 : _parentElement.closest('div,p') : focusInCell ? (_parentElement2 = focusNode.parentElement) === null || _parentElement2 === void 0 ? void 0 : _parentElement2.closest('div,p') : tableCell;
|
|
199
|
+
|
|
200
|
+
if (elementToSelect) {
|
|
201
|
+
selection.selectAllChildren(elementToSelect);
|
|
202
|
+
}
|
|
203
|
+
});
|
|
148
204
|
_this.providerFactory = props.dataProviders || new _providerFactory.ProviderFactory();
|
|
149
205
|
_this.serializer = new _.ReactSerializer(_this.deriveSerializerProps(props));
|
|
150
206
|
_this.editorRef = props.innerRef || /*#__PURE__*/_react.default.createRef();
|
|
@@ -294,7 +350,7 @@ var Renderer = /*#__PURE__*/function (_PureComponent) {
|
|
|
294
350
|
var _this3 = this;
|
|
295
351
|
|
|
296
352
|
var _this$props = this.props,
|
|
297
|
-
|
|
353
|
+
adfDocument = _this$props.document,
|
|
298
354
|
onComplete = _this$props.onComplete,
|
|
299
355
|
onError = _this$props.onError,
|
|
300
356
|
appearance = _this$props.appearance,
|
|
@@ -319,12 +375,17 @@ var Renderer = /*#__PURE__*/function (_PureComponent) {
|
|
|
319
375
|
var handleWrapperOnClick = function handleWrapperOnClick(event) {
|
|
320
376
|
var _this3$props$eventHan;
|
|
321
377
|
|
|
378
|
+
var targetElement = event.target; // ED-14862: When a user triple clicks to select a line of content inside a
|
|
379
|
+
// a table cell, but the browser incorrectly moves the selection start or end into
|
|
380
|
+
// a different table cell, we manually set the selection back to within the original
|
|
381
|
+
// table cell the user intended to target
|
|
382
|
+
|
|
383
|
+
_this3.handleMouseTripleClickInTables(event);
|
|
384
|
+
|
|
322
385
|
if (!((_this3$props$eventHan = _this3.props.eventHandlers) !== null && _this3$props$eventHan !== void 0 && _this3$props$eventHan.onUnhandledClick)) {
|
|
323
386
|
return;
|
|
324
387
|
}
|
|
325
388
|
|
|
326
|
-
var targetElement = event.target;
|
|
327
|
-
|
|
328
389
|
if (!(targetElement instanceof window.Element)) {
|
|
329
390
|
return;
|
|
330
391
|
}
|
|
@@ -359,7 +420,7 @@ var Renderer = /*#__PURE__*/function (_PureComponent) {
|
|
|
359
420
|
|
|
360
421
|
var schema = this.getSchema(this.props.schema, this.props.adfStage);
|
|
361
422
|
|
|
362
|
-
var _renderDocument = (0, _.renderDocument)(
|
|
423
|
+
var _renderDocument = (0, _.renderDocument)(adfDocument, this.serializer, schema, adfStage, this.props.useSpecBasedValidator, this.id, this.fireAnalyticsEvent, this.props.unsupportedContentLevelsTracking, this.props.appearance),
|
|
363
424
|
result = _renderDocument.result,
|
|
364
425
|
stat = _renderDocument.stat,
|
|
365
426
|
pmDoc = _renderDocument.pmDoc;
|
package/dist/cjs/version.json
CHANGED
package/dist/es2019/messages.js
CHANGED
|
@@ -33,7 +33,7 @@ export const tableCellMessages = defineMessages({
|
|
|
33
33
|
description: 'this table column is sorted in ascending order'
|
|
34
34
|
},
|
|
35
35
|
descSortingLabel: {
|
|
36
|
-
id: 'fabric.editor.headingLink.
|
|
36
|
+
id: 'fabric.editor.headingLink.descSortingLabel',
|
|
37
37
|
defaultMessage: 'descending',
|
|
38
38
|
description: 'this table column is sorted in descending order'
|
|
39
39
|
}
|
|
@@ -55,20 +55,8 @@ export const sortingIconMessages = defineMessages({
|
|
|
55
55
|
description: 'clear the sorting from this column'
|
|
56
56
|
},
|
|
57
57
|
invalidLabel: {
|
|
58
|
-
id: 'fabric.editor.headingLink.
|
|
58
|
+
id: 'fabric.editor.headingLink.invalidLabel',
|
|
59
59
|
defaultMessage: `⚠️ You can't sort a table with merged cell`,
|
|
60
60
|
description: 'this sort is invalid for merged cells'
|
|
61
61
|
}
|
|
62
|
-
});
|
|
63
|
-
export const codeBlockCopyButtonMessages = defineMessages({
|
|
64
|
-
copyCodeToClipboard: {
|
|
65
|
-
id: 'fabric.editor.codeBlockCopyButton.copyToClipboard',
|
|
66
|
-
defaultMessage: 'Copy',
|
|
67
|
-
description: 'Copy the whole content of the element to your clipboard'
|
|
68
|
-
},
|
|
69
|
-
copiedCodeToClipboard: {
|
|
70
|
-
id: 'fabric.editor.codeBlockCopyButton.copiedToClipboard',
|
|
71
|
-
defaultMessage: 'Copied!',
|
|
72
|
-
description: 'Copied the whole content of the element to clipboard'
|
|
73
|
-
}
|
|
74
62
|
});
|
|
@@ -7,7 +7,7 @@ import Button from '@atlaskit/button/custom-theme-button';
|
|
|
7
7
|
import CopyIcon from '@atlaskit/icon/glyph/copy';
|
|
8
8
|
import { N20, N30, N700 } from '@atlaskit/theme/colors';
|
|
9
9
|
import { copyTextToClipboard } from '../utils/clipboard';
|
|
10
|
-
import { codeBlockCopyButtonMessages } from '
|
|
10
|
+
import { codeBlockCopyButtonMessages } from '@atlaskit/editor-common/messages';
|
|
11
11
|
import { token } from '@atlaskit/tokens';
|
|
12
12
|
const copyButtonWrapperStyles = css`
|
|
13
13
|
display: flex;
|
|
@@ -1,9 +1,6 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { tableCellBorderWidth, tableCellMinWidth } from '@atlaskit/editor-common/styles';
|
|
3
|
-
import { akEditorTableNumberColumnWidth, akEditorWideLayoutWidth, akEditorFullWidthLayoutWidth, akEditorTableLegacyCellMinWidth } from '@atlaskit/editor-shared-styles';
|
|
4
|
-
import { calcLineLength } from '../../../ui/Renderer/breakout-ssr';
|
|
5
|
-
// we allow scaling down column widths by no more than 15%
|
|
6
|
-
const MAX_SCALING_PERCENT = 0.15;
|
|
3
|
+
import { akEditorTableNumberColumnWidth, akEditorWideLayoutWidth, akEditorFullWidthLayoutWidth, akEditorTableLegacyCellMinWidth, akEditorDefaultLayoutWidth } from '@atlaskit/editor-shared-styles';
|
|
7
4
|
|
|
8
5
|
const getTableLayoutWidth = (layout, opts) => {
|
|
9
6
|
switch (layout) {
|
|
@@ -14,7 +11,7 @@ const getTableLayoutWidth = (layout, opts) => {
|
|
|
14
11
|
return akEditorWideLayoutWidth;
|
|
15
12
|
|
|
16
13
|
default:
|
|
17
|
-
return
|
|
14
|
+
return akEditorDefaultLayoutWidth;
|
|
18
15
|
}
|
|
19
16
|
};
|
|
20
17
|
|
|
@@ -23,29 +20,15 @@ const isTableResized = columnWidths => {
|
|
|
23
20
|
return !!filteredWidths.length;
|
|
24
21
|
};
|
|
25
22
|
|
|
26
|
-
const fixColumnWidth = (columnWidth, _tableWidth, _layoutWidth, zeroWidthColumnsCount
|
|
23
|
+
const fixColumnWidth = (columnWidth, _tableWidth, _layoutWidth, zeroWidthColumnsCount) => {
|
|
27
24
|
if (columnWidth === 0) {
|
|
28
25
|
return columnWidth;
|
|
29
|
-
} // If the tables total width (including no zero widths col or cols without width) is less than the current layout
|
|
30
|
-
// We scale up the columns to meet the minimum of the table layout.
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
if (zeroWidthColumnsCount === 0 && scaleDownPercent) {
|
|
34
|
-
return Math.floor((1 - scaleDownPercent) * columnWidth);
|
|
35
26
|
}
|
|
36
27
|
|
|
37
28
|
return Math.max( // We need to take tableCellBorderWidth, to avoid unneccesary overflow.
|
|
38
29
|
columnWidth - tableCellBorderWidth, zeroWidthColumnsCount ? akEditorTableLegacyCellMinWidth : tableCellMinWidth);
|
|
39
30
|
};
|
|
40
31
|
|
|
41
|
-
export const calcScalePercent = ({
|
|
42
|
-
renderWidth,
|
|
43
|
-
tableWidth,
|
|
44
|
-
maxScale
|
|
45
|
-
}) => {
|
|
46
|
-
const diffPercent = 1 - renderWidth / tableWidth;
|
|
47
|
-
return diffPercent < maxScale ? diffPercent : maxScale;
|
|
48
|
-
};
|
|
49
32
|
export const Colgroup = props => {
|
|
50
33
|
let {
|
|
51
34
|
columnWidths,
|
|
@@ -82,21 +65,13 @@ export const Colgroup = props => {
|
|
|
82
65
|
|
|
83
66
|
minTableWidth += Math.ceil(width) || akEditorTableLegacyCellMinWidth;
|
|
84
67
|
});
|
|
85
|
-
let cellMinWidth = 0;
|
|
86
|
-
let scaleDownPercent = 0; // fixes migration tables with zero-width columns
|
|
68
|
+
let cellMinWidth = 0; // fixes migration tables with zero-width columns
|
|
87
69
|
|
|
88
70
|
if (zeroWidthColumnsCount > 0) {
|
|
89
71
|
if (minTableWidth > maxTableWidth) {
|
|
90
72
|
const minWidth = Math.ceil((maxTableWidth - tableWidth) / zeroWidthColumnsCount);
|
|
91
73
|
cellMinWidth = minWidth < akEditorTableLegacyCellMinWidth ? akEditorTableLegacyCellMinWidth : minWidth;
|
|
92
74
|
}
|
|
93
|
-
} // scaling down
|
|
94
|
-
else if (renderWidth < tableWidth) {
|
|
95
|
-
scaleDownPercent = calcScalePercent({
|
|
96
|
-
renderWidth,
|
|
97
|
-
tableWidth,
|
|
98
|
-
maxScale: MAX_SCALING_PERCENT
|
|
99
|
-
});
|
|
100
75
|
}
|
|
101
76
|
|
|
102
77
|
return /*#__PURE__*/React.createElement("colgroup", null, isNumberColumnEnabled && /*#__PURE__*/React.createElement("col", {
|
|
@@ -104,7 +79,7 @@ export const Colgroup = props => {
|
|
|
104
79
|
width: akEditorTableNumberColumnWidth
|
|
105
80
|
}
|
|
106
81
|
}), columnWidths.map((colWidth, idx) => {
|
|
107
|
-
const width = fixColumnWidth(colWidth, minTableWidth, maxTableWidth, zeroWidthColumnsCount
|
|
82
|
+
const width = fixColumnWidth(colWidth, minTableWidth, maxTableWidth, zeroWidthColumnsCount) || cellMinWidth;
|
|
108
83
|
const style = width ? {
|
|
109
84
|
width: `${width}px`
|
|
110
85
|
} : {};
|
|
@@ -8,9 +8,9 @@ import { SortOrder } from '@atlaskit/editor-common/types';
|
|
|
8
8
|
import { FullPagePadding } from '../../ui/Renderer/style';
|
|
9
9
|
import { TableHeader } from './tableCell';
|
|
10
10
|
import { withSmartCardStorage } from '../../ui/SmartCardStorage';
|
|
11
|
-
import { calcLineLength } from '../../ui/Renderer/breakout-ssr';
|
|
12
11
|
import { StickyTable, tableStickyPadding, OverflowParent } from './table/sticky';
|
|
13
12
|
import { Table } from './table/table';
|
|
13
|
+
import { akEditorDefaultLayoutWidth } from '@atlaskit/editor-shared-styles';
|
|
14
14
|
|
|
15
15
|
const orderChildren = (children, tableNode, smartCardStorage, tableOrderStatus) => {
|
|
16
16
|
if (!tableOrderStatus || tableOrderStatus.order === SortOrder.NO_ORDER) {
|
|
@@ -261,7 +261,7 @@ export class TableContainer extends React.Component {
|
|
|
261
261
|
stickyMode
|
|
262
262
|
} = this.state;
|
|
263
263
|
let tableWidth = calcTableWidth(layout, renderWidth, false);
|
|
264
|
-
const lineLength =
|
|
264
|
+
const lineLength = akEditorDefaultLayoutWidth;
|
|
265
265
|
let left;
|
|
266
266
|
|
|
267
267
|
if (canUseLinelength(this.props.rendererAppearance) && tableWidth !== 'inherit') {
|
|
@@ -113,7 +113,7 @@ const _createNodeAndCheck = (schema, doc, dispatchAnalyticsEvent) => {
|
|
|
113
113
|
actionSubject: ACTION_SUBJECT.RENDERER,
|
|
114
114
|
attributes: {
|
|
115
115
|
platform: PLATFORM.WEB,
|
|
116
|
-
|
|
116
|
+
errorStack: err === null || err === void 0 ? void 0 : err.toString()
|
|
117
117
|
},
|
|
118
118
|
eventType: EVENT_TYPE.OPERATIONAL
|
|
119
119
|
});
|
|
@@ -9,7 +9,7 @@ import { getSchemaBasedOnStage } from '@atlaskit/adf-schema/schema-default';
|
|
|
9
9
|
import { reduce } from '@atlaskit/adf-utils/traverse';
|
|
10
10
|
import { ProviderFactory } from '@atlaskit/editor-common/provider-factory';
|
|
11
11
|
import { UnsupportedBlock, BaseTheme, WidthProvider, WithCreateAnalyticsEvent, IntlErrorBoundary } from '@atlaskit/editor-common/ui';
|
|
12
|
-
import { getAnalyticsAppearance, getAnalyticsEventSeverity, getResponseEndTime, startMeasure, stopMeasure, shouldForceTracking, measureTTI } from '@atlaskit/editor-common/utils';
|
|
12
|
+
import { getAnalyticsAppearance, getAnalyticsEventSeverity, getResponseEndTime, startMeasure, stopMeasure, shouldForceTracking, measureTTI, browser } from '@atlaskit/editor-common/utils';
|
|
13
13
|
import { normalizeFeatureFlags } from '@atlaskit/editor-common/normalize-feature-flags';
|
|
14
14
|
import { akEditorFullPageDefaultFontSize } from '@atlaskit/editor-shared-styles';
|
|
15
15
|
import { FabricChannel } from '@atlaskit/analytics-listeners';
|
|
@@ -36,7 +36,7 @@ import { RenderTracking } from '../../react/utils/performance/RenderTracking';
|
|
|
36
36
|
export const NORMAL_SEVERITY_THRESHOLD = 2000;
|
|
37
37
|
export const DEGRADED_SEVERITY_THRESHOLD = 3000;
|
|
38
38
|
const packageName = "@atlaskit/renderer";
|
|
39
|
-
const packageVersion = "101.0
|
|
39
|
+
const packageVersion = "101.1.0";
|
|
40
40
|
export class Renderer extends PureComponent {
|
|
41
41
|
constructor(props) {
|
|
42
42
|
super(props);
|
|
@@ -78,6 +78,65 @@ export class Renderer extends PureComponent {
|
|
|
78
78
|
this.mouseDownSelection = windowSelection !== null ? windowSelection.toString() : undefined;
|
|
79
79
|
});
|
|
80
80
|
|
|
81
|
+
_defineProperty(this, "handleMouseTripleClickInTables", event => {
|
|
82
|
+
var _parentElement, _parentElement2;
|
|
83
|
+
|
|
84
|
+
if (browser.ios || browser.android) {
|
|
85
|
+
return;
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
const badBrowser = browser.chrome || browser.safari;
|
|
89
|
+
const tripleClick = event.detail >= 3;
|
|
90
|
+
|
|
91
|
+
if (!(badBrowser && tripleClick)) {
|
|
92
|
+
return;
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
const selection = window.getSelection();
|
|
96
|
+
|
|
97
|
+
if (!selection) {
|
|
98
|
+
return;
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
const {
|
|
102
|
+
type,
|
|
103
|
+
anchorNode,
|
|
104
|
+
focusNode
|
|
105
|
+
} = selection;
|
|
106
|
+
const rangeSelection = Boolean(type === 'Range' && anchorNode && focusNode);
|
|
107
|
+
|
|
108
|
+
if (!rangeSelection) {
|
|
109
|
+
return;
|
|
110
|
+
}
|
|
111
|
+
|
|
112
|
+
const target = event.target;
|
|
113
|
+
const tableCell = target.closest('td,th');
|
|
114
|
+
const clickedInCell = Boolean(tableCell);
|
|
115
|
+
|
|
116
|
+
if (!clickedInCell) {
|
|
117
|
+
return;
|
|
118
|
+
}
|
|
119
|
+
|
|
120
|
+
const anchorInCell = tableCell.contains(anchorNode);
|
|
121
|
+
const focusInCell = tableCell.contains(focusNode);
|
|
122
|
+
const selectionStartsOrEndsOutsideClickedCell = !(anchorInCell && focusInCell);
|
|
123
|
+
|
|
124
|
+
if (!selectionStartsOrEndsOutsideClickedCell) {
|
|
125
|
+
return;
|
|
126
|
+
} // If selection starts or ends in a different cell than the clicked cell,
|
|
127
|
+
// we select the node inside the clicked cell (or if both are in a different
|
|
128
|
+
// cell, we select the cell's contents instead). We want to select the nearest
|
|
129
|
+
// parent block, so that a whole line of text/content is selected (rather than
|
|
130
|
+
// selecting a span that would select one specific chunk of text).
|
|
131
|
+
|
|
132
|
+
|
|
133
|
+
const elementToSelect = anchorInCell ? (_parentElement = anchorNode.parentElement) === null || _parentElement === void 0 ? void 0 : _parentElement.closest('div,p') : focusInCell ? (_parentElement2 = focusNode.parentElement) === null || _parentElement2 === void 0 ? void 0 : _parentElement2.closest('div,p') : tableCell;
|
|
134
|
+
|
|
135
|
+
if (elementToSelect) {
|
|
136
|
+
selection.selectAllChildren(elementToSelect);
|
|
137
|
+
}
|
|
138
|
+
});
|
|
139
|
+
|
|
81
140
|
this.providerFactory = props.dataProviders || new ProviderFactory();
|
|
82
141
|
this.serializer = new ReactSerializer(this.deriveSerializerProps(props));
|
|
83
142
|
this.editorRef = props.innerRef || /*#__PURE__*/React.createRef();
|
|
@@ -218,7 +277,7 @@ export class Renderer extends PureComponent {
|
|
|
218
277
|
|
|
219
278
|
render() {
|
|
220
279
|
const {
|
|
221
|
-
document,
|
|
280
|
+
document: adfDocument,
|
|
222
281
|
onComplete,
|
|
223
282
|
onError,
|
|
224
283
|
appearance,
|
|
@@ -244,12 +303,17 @@ export class Renderer extends PureComponent {
|
|
|
244
303
|
const handleWrapperOnClick = event => {
|
|
245
304
|
var _this$props$eventHand;
|
|
246
305
|
|
|
306
|
+
const targetElement = event.target; // ED-14862: When a user triple clicks to select a line of content inside a
|
|
307
|
+
// a table cell, but the browser incorrectly moves the selection start or end into
|
|
308
|
+
// a different table cell, we manually set the selection back to within the original
|
|
309
|
+
// table cell the user intended to target
|
|
310
|
+
|
|
311
|
+
this.handleMouseTripleClickInTables(event);
|
|
312
|
+
|
|
247
313
|
if (!((_this$props$eventHand = this.props.eventHandlers) !== null && _this$props$eventHand !== void 0 && _this$props$eventHand.onUnhandledClick)) {
|
|
248
314
|
return;
|
|
249
315
|
}
|
|
250
316
|
|
|
251
|
-
const targetElement = event.target;
|
|
252
|
-
|
|
253
317
|
if (!(targetElement instanceof window.Element)) {
|
|
254
318
|
return;
|
|
255
319
|
}
|
|
@@ -287,7 +351,7 @@ export class Renderer extends PureComponent {
|
|
|
287
351
|
result,
|
|
288
352
|
stat,
|
|
289
353
|
pmDoc
|
|
290
|
-
} = renderDocument(
|
|
354
|
+
} = renderDocument(adfDocument, this.serializer, schema, adfStage, this.props.useSpecBasedValidator, this.id, this.fireAnalyticsEvent, this.props.unsupportedContentLevelsTracking, this.props.appearance);
|
|
291
355
|
|
|
292
356
|
if (onComplete) {
|
|
293
357
|
onComplete(stat);
|
package/dist/es2019/version.json
CHANGED
package/dist/esm/messages.js
CHANGED
|
@@ -33,7 +33,7 @@ export var tableCellMessages = defineMessages({
|
|
|
33
33
|
description: 'this table column is sorted in ascending order'
|
|
34
34
|
},
|
|
35
35
|
descSortingLabel: {
|
|
36
|
-
id: 'fabric.editor.headingLink.
|
|
36
|
+
id: 'fabric.editor.headingLink.descSortingLabel',
|
|
37
37
|
defaultMessage: 'descending',
|
|
38
38
|
description: 'this table column is sorted in descending order'
|
|
39
39
|
}
|
|
@@ -55,20 +55,8 @@ export var sortingIconMessages = defineMessages({
|
|
|
55
55
|
description: 'clear the sorting from this column'
|
|
56
56
|
},
|
|
57
57
|
invalidLabel: {
|
|
58
|
-
id: 'fabric.editor.headingLink.
|
|
58
|
+
id: 'fabric.editor.headingLink.invalidLabel',
|
|
59
59
|
defaultMessage: "\u26A0\uFE0F You can't sort a table with merged cell",
|
|
60
60
|
description: 'this sort is invalid for merged cells'
|
|
61
61
|
}
|
|
62
|
-
});
|
|
63
|
-
export var codeBlockCopyButtonMessages = defineMessages({
|
|
64
|
-
copyCodeToClipboard: {
|
|
65
|
-
id: 'fabric.editor.codeBlockCopyButton.copyToClipboard',
|
|
66
|
-
defaultMessage: 'Copy',
|
|
67
|
-
description: 'Copy the whole content of the element to your clipboard'
|
|
68
|
-
},
|
|
69
|
-
copiedCodeToClipboard: {
|
|
70
|
-
id: 'fabric.editor.codeBlockCopyButton.copiedToClipboard',
|
|
71
|
-
defaultMessage: 'Copied!',
|
|
72
|
-
description: 'Copied the whole content of the element to clipboard'
|
|
73
|
-
}
|
|
74
62
|
});
|
|
@@ -12,7 +12,7 @@ import Button from '@atlaskit/button/custom-theme-button';
|
|
|
12
12
|
import CopyIcon from '@atlaskit/icon/glyph/copy';
|
|
13
13
|
import { N20, N30, N700 } from '@atlaskit/theme/colors';
|
|
14
14
|
import { copyTextToClipboard } from '../utils/clipboard';
|
|
15
|
-
import { codeBlockCopyButtonMessages } from '
|
|
15
|
+
import { codeBlockCopyButtonMessages } from '@atlaskit/editor-common/messages';
|
|
16
16
|
import { token } from '@atlaskit/tokens';
|
|
17
17
|
var copyButtonWrapperStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n display: flex;\n position: sticky;\n justify-content: flex-end;\n top: 0;\n\n button {\n position: absolute;\n display: flex;\n justify-content: center;\n height: 32px;\n width: 32px;\n right: 6px;\n top: 4px;\n padding: 2px;\n opacity: 0;\n transition: opacity 0.2s ease 0s;\n border: 2px solid ", ";\n border-radius: 4px;\n background-color: ", ";\n color: ", ";\n }\n\n button:hover {\n background-color: ", ";\n }\n\n button.clicked {\n background-color: ", ";\n color: ", " !important;\n }\n"])), token('color.border.inverse', '#fff'), token('color.background.neutral.subtle', N20), token('color.icon', 'rgb(66, 82, 110)'), token('color.background.neutral.hovered', N30), token('color.background.neutral.bold.pressed', N700), token('color.icon.inverse', '#fff'));
|
|
18
18
|
|
|
@@ -1,9 +1,6 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { tableCellBorderWidth, tableCellMinWidth } from '@atlaskit/editor-common/styles';
|
|
3
|
-
import { akEditorTableNumberColumnWidth, akEditorWideLayoutWidth, akEditorFullWidthLayoutWidth, akEditorTableLegacyCellMinWidth } from '@atlaskit/editor-shared-styles';
|
|
4
|
-
import { calcLineLength } from '../../../ui/Renderer/breakout-ssr';
|
|
5
|
-
// we allow scaling down column widths by no more than 15%
|
|
6
|
-
var MAX_SCALING_PERCENT = 0.15;
|
|
3
|
+
import { akEditorTableNumberColumnWidth, akEditorWideLayoutWidth, akEditorFullWidthLayoutWidth, akEditorTableLegacyCellMinWidth, akEditorDefaultLayoutWidth } from '@atlaskit/editor-shared-styles';
|
|
7
4
|
|
|
8
5
|
var getTableLayoutWidth = function getTableLayoutWidth(layout, opts) {
|
|
9
6
|
switch (layout) {
|
|
@@ -14,7 +11,7 @@ var getTableLayoutWidth = function getTableLayoutWidth(layout, opts) {
|
|
|
14
11
|
return akEditorWideLayoutWidth;
|
|
15
12
|
|
|
16
13
|
default:
|
|
17
|
-
return
|
|
14
|
+
return akEditorDefaultLayoutWidth;
|
|
18
15
|
}
|
|
19
16
|
};
|
|
20
17
|
|
|
@@ -25,28 +22,15 @@ var isTableResized = function isTableResized(columnWidths) {
|
|
|
25
22
|
return !!filteredWidths.length;
|
|
26
23
|
};
|
|
27
24
|
|
|
28
|
-
var fixColumnWidth = function fixColumnWidth(columnWidth, _tableWidth, _layoutWidth, zeroWidthColumnsCount
|
|
25
|
+
var fixColumnWidth = function fixColumnWidth(columnWidth, _tableWidth, _layoutWidth, zeroWidthColumnsCount) {
|
|
29
26
|
if (columnWidth === 0) {
|
|
30
27
|
return columnWidth;
|
|
31
|
-
} // If the tables total width (including no zero widths col or cols without width) is less than the current layout
|
|
32
|
-
// We scale up the columns to meet the minimum of the table layout.
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
if (zeroWidthColumnsCount === 0 && scaleDownPercent) {
|
|
36
|
-
return Math.floor((1 - scaleDownPercent) * columnWidth);
|
|
37
28
|
}
|
|
38
29
|
|
|
39
30
|
return Math.max( // We need to take tableCellBorderWidth, to avoid unneccesary overflow.
|
|
40
31
|
columnWidth - tableCellBorderWidth, zeroWidthColumnsCount ? akEditorTableLegacyCellMinWidth : tableCellMinWidth);
|
|
41
32
|
};
|
|
42
33
|
|
|
43
|
-
export var calcScalePercent = function calcScalePercent(_ref) {
|
|
44
|
-
var renderWidth = _ref.renderWidth,
|
|
45
|
-
tableWidth = _ref.tableWidth,
|
|
46
|
-
maxScale = _ref.maxScale;
|
|
47
|
-
var diffPercent = 1 - renderWidth / tableWidth;
|
|
48
|
-
return diffPercent < maxScale ? diffPercent : maxScale;
|
|
49
|
-
};
|
|
50
34
|
export var Colgroup = function Colgroup(props) {
|
|
51
35
|
var columnWidths = props.columnWidths,
|
|
52
36
|
layout = props.layout,
|
|
@@ -81,21 +65,13 @@ export var Colgroup = function Colgroup(props) {
|
|
|
81
65
|
|
|
82
66
|
minTableWidth += Math.ceil(width) || akEditorTableLegacyCellMinWidth;
|
|
83
67
|
});
|
|
84
|
-
var cellMinWidth = 0;
|
|
85
|
-
var scaleDownPercent = 0; // fixes migration tables with zero-width columns
|
|
68
|
+
var cellMinWidth = 0; // fixes migration tables with zero-width columns
|
|
86
69
|
|
|
87
70
|
if (zeroWidthColumnsCount > 0) {
|
|
88
71
|
if (minTableWidth > maxTableWidth) {
|
|
89
72
|
var minWidth = Math.ceil((maxTableWidth - tableWidth) / zeroWidthColumnsCount);
|
|
90
73
|
cellMinWidth = minWidth < akEditorTableLegacyCellMinWidth ? akEditorTableLegacyCellMinWidth : minWidth;
|
|
91
74
|
}
|
|
92
|
-
} // scaling down
|
|
93
|
-
else if (renderWidth < tableWidth) {
|
|
94
|
-
scaleDownPercent = calcScalePercent({
|
|
95
|
-
renderWidth: renderWidth,
|
|
96
|
-
tableWidth: tableWidth,
|
|
97
|
-
maxScale: MAX_SCALING_PERCENT
|
|
98
|
-
});
|
|
99
75
|
}
|
|
100
76
|
|
|
101
77
|
return /*#__PURE__*/React.createElement("colgroup", null, isNumberColumnEnabled && /*#__PURE__*/React.createElement("col", {
|
|
@@ -103,7 +79,7 @@ export var Colgroup = function Colgroup(props) {
|
|
|
103
79
|
width: akEditorTableNumberColumnWidth
|
|
104
80
|
}
|
|
105
81
|
}), columnWidths.map(function (colWidth, idx) {
|
|
106
|
-
var width = fixColumnWidth(colWidth, minTableWidth, maxTableWidth, zeroWidthColumnsCount
|
|
82
|
+
var width = fixColumnWidth(colWidth, minTableWidth, maxTableWidth, zeroWidthColumnsCount) || cellMinWidth;
|
|
107
83
|
var style = width ? {
|
|
108
84
|
width: "".concat(width, "px")
|
|
109
85
|
} : {};
|
|
@@ -19,9 +19,9 @@ import { SortOrder } from '@atlaskit/editor-common/types';
|
|
|
19
19
|
import { FullPagePadding } from '../../ui/Renderer/style';
|
|
20
20
|
import { TableHeader } from './tableCell';
|
|
21
21
|
import { withSmartCardStorage } from '../../ui/SmartCardStorage';
|
|
22
|
-
import { calcLineLength } from '../../ui/Renderer/breakout-ssr';
|
|
23
22
|
import { StickyTable, tableStickyPadding, OverflowParent } from './table/sticky';
|
|
24
23
|
import { Table } from './table/table';
|
|
24
|
+
import { akEditorDefaultLayoutWidth } from '@atlaskit/editor-shared-styles';
|
|
25
25
|
|
|
26
26
|
var orderChildren = function orderChildren(children, tableNode, smartCardStorage, tableOrderStatus) {
|
|
27
27
|
if (!tableOrderStatus || tableOrderStatus.order === SortOrder.NO_ORDER) {
|
|
@@ -298,7 +298,7 @@ export var TableContainer = /*#__PURE__*/function (_React$Component) {
|
|
|
298
298
|
tableNode = _this$props.tableNode;
|
|
299
299
|
var stickyMode = this.state.stickyMode;
|
|
300
300
|
var tableWidth = calcTableWidth(layout, renderWidth, false);
|
|
301
|
-
var lineLength =
|
|
301
|
+
var lineLength = akEditorDefaultLayoutWidth;
|
|
302
302
|
var left;
|
|
303
303
|
|
|
304
304
|
if (canUseLinelength(this.props.rendererAppearance) && tableWidth !== 'inherit') {
|
|
@@ -129,7 +129,7 @@ var _createNodeAndCheck = function _createNodeAndCheck(schema, doc, dispatchAnal
|
|
|
129
129
|
actionSubject: ACTION_SUBJECT.RENDERER,
|
|
130
130
|
attributes: {
|
|
131
131
|
platform: PLATFORM.WEB,
|
|
132
|
-
|
|
132
|
+
errorStack: err === null || err === void 0 ? void 0 : err.toString()
|
|
133
133
|
},
|
|
134
134
|
eventType: EVENT_TYPE.OPERATIONAL
|
|
135
135
|
});
|
|
@@ -23,7 +23,7 @@ import { getSchemaBasedOnStage } from '@atlaskit/adf-schema/schema-default';
|
|
|
23
23
|
import { reduce } from '@atlaskit/adf-utils/traverse';
|
|
24
24
|
import { ProviderFactory } from '@atlaskit/editor-common/provider-factory';
|
|
25
25
|
import { UnsupportedBlock, BaseTheme, WidthProvider, WithCreateAnalyticsEvent, IntlErrorBoundary } from '@atlaskit/editor-common/ui';
|
|
26
|
-
import { getAnalyticsAppearance, getAnalyticsEventSeverity, getResponseEndTime, startMeasure, stopMeasure, shouldForceTracking, measureTTI } from '@atlaskit/editor-common/utils';
|
|
26
|
+
import { getAnalyticsAppearance, getAnalyticsEventSeverity, getResponseEndTime, startMeasure, stopMeasure, shouldForceTracking, measureTTI, browser } from '@atlaskit/editor-common/utils';
|
|
27
27
|
import { normalizeFeatureFlags } from '@atlaskit/editor-common/normalize-feature-flags';
|
|
28
28
|
import { akEditorFullPageDefaultFontSize } from '@atlaskit/editor-shared-styles';
|
|
29
29
|
import { FabricChannel } from '@atlaskit/analytics-listeners';
|
|
@@ -50,7 +50,7 @@ import { RenderTracking } from '../../react/utils/performance/RenderTracking';
|
|
|
50
50
|
export var NORMAL_SEVERITY_THRESHOLD = 2000;
|
|
51
51
|
export var DEGRADED_SEVERITY_THRESHOLD = 3000;
|
|
52
52
|
var packageName = "@atlaskit/renderer";
|
|
53
|
-
var packageVersion = "101.0
|
|
53
|
+
var packageVersion = "101.1.0";
|
|
54
54
|
export var Renderer = /*#__PURE__*/function (_PureComponent) {
|
|
55
55
|
_inherits(Renderer, _PureComponent);
|
|
56
56
|
|
|
@@ -98,6 +98,63 @@ export var Renderer = /*#__PURE__*/function (_PureComponent) {
|
|
|
98
98
|
_this.mouseDownSelection = windowSelection !== null ? windowSelection.toString() : undefined;
|
|
99
99
|
});
|
|
100
100
|
|
|
101
|
+
_defineProperty(_assertThisInitialized(_this), "handleMouseTripleClickInTables", function (event) {
|
|
102
|
+
var _parentElement, _parentElement2;
|
|
103
|
+
|
|
104
|
+
if (browser.ios || browser.android) {
|
|
105
|
+
return;
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
var badBrowser = browser.chrome || browser.safari;
|
|
109
|
+
var tripleClick = event.detail >= 3;
|
|
110
|
+
|
|
111
|
+
if (!(badBrowser && tripleClick)) {
|
|
112
|
+
return;
|
|
113
|
+
}
|
|
114
|
+
|
|
115
|
+
var selection = window.getSelection();
|
|
116
|
+
|
|
117
|
+
if (!selection) {
|
|
118
|
+
return;
|
|
119
|
+
}
|
|
120
|
+
|
|
121
|
+
var type = selection.type,
|
|
122
|
+
anchorNode = selection.anchorNode,
|
|
123
|
+
focusNode = selection.focusNode;
|
|
124
|
+
var rangeSelection = Boolean(type === 'Range' && anchorNode && focusNode);
|
|
125
|
+
|
|
126
|
+
if (!rangeSelection) {
|
|
127
|
+
return;
|
|
128
|
+
}
|
|
129
|
+
|
|
130
|
+
var target = event.target;
|
|
131
|
+
var tableCell = target.closest('td,th');
|
|
132
|
+
var clickedInCell = Boolean(tableCell);
|
|
133
|
+
|
|
134
|
+
if (!clickedInCell) {
|
|
135
|
+
return;
|
|
136
|
+
}
|
|
137
|
+
|
|
138
|
+
var anchorInCell = tableCell.contains(anchorNode);
|
|
139
|
+
var focusInCell = tableCell.contains(focusNode);
|
|
140
|
+
var selectionStartsOrEndsOutsideClickedCell = !(anchorInCell && focusInCell);
|
|
141
|
+
|
|
142
|
+
if (!selectionStartsOrEndsOutsideClickedCell) {
|
|
143
|
+
return;
|
|
144
|
+
} // If selection starts or ends in a different cell than the clicked cell,
|
|
145
|
+
// we select the node inside the clicked cell (or if both are in a different
|
|
146
|
+
// cell, we select the cell's contents instead). We want to select the nearest
|
|
147
|
+
// parent block, so that a whole line of text/content is selected (rather than
|
|
148
|
+
// selecting a span that would select one specific chunk of text).
|
|
149
|
+
|
|
150
|
+
|
|
151
|
+
var elementToSelect = anchorInCell ? (_parentElement = anchorNode.parentElement) === null || _parentElement === void 0 ? void 0 : _parentElement.closest('div,p') : focusInCell ? (_parentElement2 = focusNode.parentElement) === null || _parentElement2 === void 0 ? void 0 : _parentElement2.closest('div,p') : tableCell;
|
|
152
|
+
|
|
153
|
+
if (elementToSelect) {
|
|
154
|
+
selection.selectAllChildren(elementToSelect);
|
|
155
|
+
}
|
|
156
|
+
});
|
|
157
|
+
|
|
101
158
|
_this.providerFactory = props.dataProviders || new ProviderFactory();
|
|
102
159
|
_this.serializer = new ReactSerializer(_this.deriveSerializerProps(props));
|
|
103
160
|
_this.editorRef = props.innerRef || /*#__PURE__*/React.createRef();
|
|
@@ -247,7 +304,7 @@ export var Renderer = /*#__PURE__*/function (_PureComponent) {
|
|
|
247
304
|
var _this3 = this;
|
|
248
305
|
|
|
249
306
|
var _this$props = this.props,
|
|
250
|
-
|
|
307
|
+
adfDocument = _this$props.document,
|
|
251
308
|
onComplete = _this$props.onComplete,
|
|
252
309
|
onError = _this$props.onError,
|
|
253
310
|
appearance = _this$props.appearance,
|
|
@@ -272,12 +329,17 @@ export var Renderer = /*#__PURE__*/function (_PureComponent) {
|
|
|
272
329
|
var handleWrapperOnClick = function handleWrapperOnClick(event) {
|
|
273
330
|
var _this3$props$eventHan;
|
|
274
331
|
|
|
332
|
+
var targetElement = event.target; // ED-14862: When a user triple clicks to select a line of content inside a
|
|
333
|
+
// a table cell, but the browser incorrectly moves the selection start or end into
|
|
334
|
+
// a different table cell, we manually set the selection back to within the original
|
|
335
|
+
// table cell the user intended to target
|
|
336
|
+
|
|
337
|
+
_this3.handleMouseTripleClickInTables(event);
|
|
338
|
+
|
|
275
339
|
if (!((_this3$props$eventHan = _this3.props.eventHandlers) !== null && _this3$props$eventHan !== void 0 && _this3$props$eventHan.onUnhandledClick)) {
|
|
276
340
|
return;
|
|
277
341
|
}
|
|
278
342
|
|
|
279
|
-
var targetElement = event.target;
|
|
280
|
-
|
|
281
343
|
if (!(targetElement instanceof window.Element)) {
|
|
282
344
|
return;
|
|
283
345
|
}
|
|
@@ -312,7 +374,7 @@ export var Renderer = /*#__PURE__*/function (_PureComponent) {
|
|
|
312
374
|
|
|
313
375
|
var schema = this.getSchema(this.props.schema, this.props.adfStage);
|
|
314
376
|
|
|
315
|
-
var _renderDocument = renderDocument(
|
|
377
|
+
var _renderDocument = renderDocument(adfDocument, this.serializer, schema, adfStage, this.props.useSpecBasedValidator, this.id, this.fireAnalyticsEvent, this.props.unsupportedContentLevelsTracking, this.props.appearance),
|
|
316
378
|
result = _renderDocument.result,
|
|
317
379
|
stat = _renderDocument.stat,
|
|
318
380
|
pmDoc = _renderDocument.pmDoc;
|
package/dist/esm/version.json
CHANGED
package/dist/types/messages.d.ts
CHANGED
|
@@ -59,15 +59,3 @@ export declare const sortingIconMessages: {
|
|
|
59
59
|
description: string;
|
|
60
60
|
};
|
|
61
61
|
};
|
|
62
|
-
export declare const codeBlockCopyButtonMessages: {
|
|
63
|
-
copyCodeToClipboard: {
|
|
64
|
-
id: string;
|
|
65
|
-
defaultMessage: string;
|
|
66
|
-
description: string;
|
|
67
|
-
};
|
|
68
|
-
copiedCodeToClipboard: {
|
|
69
|
-
id: string;
|
|
70
|
-
defaultMessage: string;
|
|
71
|
-
description: string;
|
|
72
|
-
};
|
|
73
|
-
};
|
|
@@ -1,9 +1,3 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import { SharedTableProps } from './types';
|
|
3
|
-
export interface ScaleOptions {
|
|
4
|
-
renderWidth: number;
|
|
5
|
-
tableWidth: number;
|
|
6
|
-
maxScale: number;
|
|
7
|
-
}
|
|
8
|
-
export declare const calcScalePercent: ({ renderWidth, tableWidth, maxScale, }: ScaleOptions) => number;
|
|
9
3
|
export declare const Colgroup: (props: SharedTableProps) => JSX.Element | null;
|
|
@@ -25,6 +25,7 @@ export declare class Renderer extends PureComponent<RendererProps> {
|
|
|
25
25
|
private fireAnalyticsEvent;
|
|
26
26
|
private getSchema;
|
|
27
27
|
private onMouseDownEditView;
|
|
28
|
+
private handleMouseTripleClickInTables;
|
|
28
29
|
render(): jsx.JSX.Element;
|
|
29
30
|
componentWillUnmount(): void;
|
|
30
31
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/renderer",
|
|
3
|
-
"version": "101.0
|
|
3
|
+
"version": "101.1.0",
|
|
4
4
|
"description": "Renderer component",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"registry": "https://registry.npmjs.org/"
|
|
@@ -24,15 +24,15 @@
|
|
|
24
24
|
}
|
|
25
25
|
},
|
|
26
26
|
"dependencies": {
|
|
27
|
-
"@atlaskit/adf-schema": "^
|
|
27
|
+
"@atlaskit/adf-schema": "^24.0.0",
|
|
28
28
|
"@atlaskit/adf-utils": "^17.1.0",
|
|
29
29
|
"@atlaskit/analytics-listeners": "^8.3.0",
|
|
30
30
|
"@atlaskit/analytics-namespaced-context": "^6.5.0",
|
|
31
31
|
"@atlaskit/analytics-next": "^8.2.0",
|
|
32
32
|
"@atlaskit/button": "^16.3.0",
|
|
33
33
|
"@atlaskit/code": "^14.3.0",
|
|
34
|
-
"@atlaskit/editor-common": "^69.
|
|
35
|
-
"@atlaskit/editor-json-transformer": "^8.
|
|
34
|
+
"@atlaskit/editor-common": "^69.2.0",
|
|
35
|
+
"@atlaskit/editor-json-transformer": "^8.8.0",
|
|
36
36
|
"@atlaskit/editor-shared-styles": "^2.1.0",
|
|
37
37
|
"@atlaskit/icon": "^21.10.0",
|
|
38
38
|
"@atlaskit/media-card": "^74.1.0",
|
|
@@ -40,11 +40,11 @@
|
|
|
40
40
|
"@atlaskit/media-common": "^2.16.0",
|
|
41
41
|
"@atlaskit/media-filmstrip": "^45.0.0",
|
|
42
42
|
"@atlaskit/media-ui": "^22.1.0",
|
|
43
|
-
"@atlaskit/media-viewer": "^47.
|
|
44
|
-
"@atlaskit/smart-card": "^
|
|
43
|
+
"@atlaskit/media-viewer": "^47.1.0",
|
|
44
|
+
"@atlaskit/smart-card": "^22.1.0",
|
|
45
45
|
"@atlaskit/status": "^1.1.0",
|
|
46
|
-
"@atlaskit/task-decision": "^17.
|
|
47
|
-
"@atlaskit/theme": "^12.
|
|
46
|
+
"@atlaskit/task-decision": "^17.5.0",
|
|
47
|
+
"@atlaskit/theme": "^12.2.0",
|
|
48
48
|
"@atlaskit/tokens": "^0.10.0",
|
|
49
49
|
"@atlaskit/tooltip": "^17.5.0",
|
|
50
50
|
"@babel/runtime": "^7.0.0",
|
|
@@ -59,8 +59,8 @@
|
|
|
59
59
|
"uuid": "^3.1.0"
|
|
60
60
|
},
|
|
61
61
|
"peerDependencies": {
|
|
62
|
-
"@atlaskit/link-provider": "^1.
|
|
63
|
-
"@atlaskit/media-core": "^33.0.
|
|
62
|
+
"@atlaskit/link-provider": "^1.2.4",
|
|
63
|
+
"@atlaskit/media-core": "^33.0.2",
|
|
64
64
|
"react": "^16.8.0",
|
|
65
65
|
"react-dom": "^16.8.0",
|
|
66
66
|
"styled-components": "^3.2.6"
|
|
@@ -70,17 +70,17 @@
|
|
|
70
70
|
"@atlaskit/avatar": "^21.0.0",
|
|
71
71
|
"@atlaskit/css-reset": "^6.3.0",
|
|
72
72
|
"@atlaskit/docs": "*",
|
|
73
|
-
"@atlaskit/editor-core": "^172.
|
|
73
|
+
"@atlaskit/editor-core": "^172.1.0",
|
|
74
74
|
"@atlaskit/editor-test-helpers": "^17.1.0",
|
|
75
75
|
"@atlaskit/link-provider": "^1.0.0",
|
|
76
|
-
"@atlaskit/logo": "^13.
|
|
76
|
+
"@atlaskit/logo": "^13.9.0",
|
|
77
77
|
"@atlaskit/media-core": "^33.0.0",
|
|
78
78
|
"@atlaskit/media-integration-test-helpers": "^2.6.0",
|
|
79
79
|
"@atlaskit/media-test-helpers": "^30.0.0",
|
|
80
80
|
"@atlaskit/mention": "^21.0.0",
|
|
81
81
|
"@atlaskit/navigation-next": "^9.0.0",
|
|
82
82
|
"@atlaskit/profilecard": "^16.12.0",
|
|
83
|
-
"@atlaskit/radio": "^5.
|
|
83
|
+
"@atlaskit/radio": "^5.4.0",
|
|
84
84
|
"@atlaskit/range": "^6.0.0",
|
|
85
85
|
"@atlaskit/ssr": "*",
|
|
86
86
|
"@atlaskit/util-data-test": "^17.5.0",
|
|
@@ -103,7 +103,7 @@
|
|
|
103
103
|
"react-test-renderer": "^16.8.0",
|
|
104
104
|
"rxjs": "^5.5.0",
|
|
105
105
|
"sinon": "^2.2.0",
|
|
106
|
-
"typescript": "4.
|
|
106
|
+
"typescript": "4.3.5",
|
|
107
107
|
"worker-plugin": "^4.0.2"
|
|
108
108
|
},
|
|
109
109
|
"prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.1",
|