@atlaskit/editor-plugin-table 42.2.5 → 42.2.6
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 +8 -0
- package/dist/cjs/nodeviews/TableContainer.js +13 -105
- package/dist/cjs/ui/DragHandle/index.js +1 -15
- package/dist/es2019/nodeviews/TableContainer.js +1 -90
- package/dist/es2019/ui/DragHandle/index.js +1 -15
- package/dist/esm/nodeviews/TableContainer.js +14 -106
- package/dist/esm/ui/DragHandle/index.js +1 -15
- package/package.json +1 -1
- package/dist/cjs/ui/hooks/useIsTableInLimitedMode.js +0 -20
- package/dist/es2019/ui/hooks/useIsTableInLimitedMode.js +0 -14
- package/dist/esm/ui/hooks/useIsTableInLimitedMode.js +0 -14
- package/dist/types/ui/hooks/useIsTableInLimitedMode.d.ts +0 -8
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,13 @@
|
|
|
1
1
|
# @atlaskit/editor-plugin-table
|
|
2
2
|
|
|
3
|
+
## 42.2.6
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [`f9a44232e1263`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/f9a44232e1263) -
|
|
8
|
+
Clean up experiment `platform_editor_table_limited_mode`
|
|
9
|
+
- Updated dependencies
|
|
10
|
+
|
|
3
11
|
## 42.2.5
|
|
4
12
|
|
|
5
13
|
### Patch Changes
|
|
@@ -13,17 +13,14 @@ var _classnames = _interopRequireDefault(require("classnames"));
|
|
|
13
13
|
var _enums = require("@atlaskit/editor-common/analytics/types/enums");
|
|
14
14
|
var _tableEvents = require("@atlaskit/editor-common/analytics/types/table-events");
|
|
15
15
|
var _nodeWidth = require("@atlaskit/editor-common/node-width");
|
|
16
|
-
var _resizer = require("@atlaskit/editor-common/styles/resizer");
|
|
17
16
|
var _useSharedPluginStateWithSelector = require("@atlaskit/editor-common/useSharedPluginStateWithSelector");
|
|
18
17
|
var _constants = require("@atlaskit/editor-shared-styles/constants");
|
|
19
18
|
var _editorExperiment = require("@atlaskit/tmp-editor-statsig/editor-experiment");
|
|
20
19
|
var _commandsWithAnalytics = require("../pm-plugins/commands/commands-with-analytics");
|
|
21
|
-
var _colgroup = require("../pm-plugins/table-resizing/utils/colgroup");
|
|
22
20
|
var _consts = require("../pm-plugins/table-resizing/utils/consts");
|
|
23
21
|
var _misc = require("../pm-plugins/table-resizing/utils/misc");
|
|
24
22
|
var _alignment = require("../pm-plugins/utils/alignment");
|
|
25
23
|
var _types = require("../types");
|
|
26
|
-
var _useIsTableInLimitedMode = require("../ui/hooks/useIsTableInLimitedMode");
|
|
27
24
|
var _tableContainerStyles = require("./table-container-styles");
|
|
28
25
|
var _TableResizer = require("./TableResizer");
|
|
29
26
|
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
|
|
@@ -346,118 +343,29 @@ var ResizableTableContainer = exports.ResizableTableContainer = /*#__PURE__*/_re
|
|
|
346
343
|
node: node
|
|
347
344
|
}, children))));
|
|
348
345
|
});
|
|
349
|
-
|
|
350
|
-
* Stand-in for `ResizableTableContainer`, used when limited mode has disabled resizing the table as
|
|
351
|
-
* a whole. Column resizing is unaffected and keeps working through the cell decorations.
|
|
352
|
-
*
|
|
353
|
-
* It reproduces the same DOM and CSS that `toDOM` renders for a resizable table
|
|
354
|
-
* (`.pm-table-resizer-container` > `.resizer-item` > `.resizer-hover-zone`) so that swapping the
|
|
355
|
-
* nodeView in over the initial ProseMirror render leaves the table exactly where it was — and so
|
|
356
|
-
* that the column resize handles still find the elements they measure against — but it mounts no
|
|
357
|
-
* `TableResizer`, so there is no `re-resizable` instance, no table width handle, no handle tooltip,
|
|
358
|
-
* no `clientHeight` read for the handle size and no per-table subscription to the interaction and
|
|
359
|
-
* table shared states.
|
|
360
|
-
*
|
|
361
|
-
* Every width here comes from the same pure-CSS helpers `toDOM` uses, so unlike
|
|
362
|
-
* `ResizableTableContainer` it needs no measured container width and does no layout maths.
|
|
363
|
-
*/
|
|
364
|
-
var StaticTableContainer = function StaticTableContainer(_ref5) {
|
|
346
|
+
var TableContainer = exports.TableContainer = function TableContainer(_ref5) {
|
|
365
347
|
var children = _ref5.children,
|
|
366
|
-
className = _ref5.className,
|
|
367
348
|
node = _ref5.node,
|
|
349
|
+
className = _ref5.className,
|
|
350
|
+
_ref5$containerWidth = _ref5.containerWidth,
|
|
351
|
+
editorWidth = _ref5$containerWidth.width,
|
|
352
|
+
lineLength = _ref5$containerWidth.lineLength,
|
|
368
353
|
editorView = _ref5.editorView,
|
|
369
354
|
getPos = _ref5.getPos,
|
|
355
|
+
tableRef = _ref5.tableRef,
|
|
356
|
+
isNested = _ref5.isNested,
|
|
357
|
+
tableWrapperHeight = _ref5.tableWrapperHeight,
|
|
358
|
+
isResizing = _ref5.isResizing,
|
|
370
359
|
pluginInjectionApi = _ref5.pluginInjectionApi,
|
|
360
|
+
isWholeTableInDanger = _ref5.isWholeTableInDanger,
|
|
361
|
+
isTableResizingEnabled = _ref5.isTableResizingEnabled,
|
|
371
362
|
isTableScalingEnabled = _ref5.isTableScalingEnabled,
|
|
363
|
+
allowFixedColumnWidthOption = _ref5.allowFixedColumnWidthOption,
|
|
372
364
|
isTableAlignmentEnabled = _ref5.isTableAlignmentEnabled,
|
|
365
|
+
shouldUseIncreasedScalingPercent = _ref5.shouldUseIncreasedScalingPercent,
|
|
373
366
|
isCommentEditor = _ref5.isCommentEditor,
|
|
374
367
|
isChromelessEditor = _ref5.isChromelessEditor;
|
|
375
|
-
var isFullPageAppearance = !isCommentEditor && !isChromelessEditor;
|
|
376
|
-
var containerStyle = (0, _react.useMemo)(function () {
|
|
377
|
-
return {
|
|
378
|
-
'--ak-editor-table-gutter-padding': 'calc(var(--ak-editor--large-gutter-padding) * 2)',
|
|
379
|
-
'--ak-editor-table-width': isFullPageAppearance ? (0, _misc.getTableResizerContainerForFullPageWidthInCSS)(node, isTableScalingEnabled) : "calc(100cqw - calc(var(--ak-editor--large-gutter-padding) * 2))",
|
|
380
|
-
width: 'var(--ak-editor-table-width)'
|
|
381
|
-
};
|
|
382
|
-
}, [node, isTableScalingEnabled, isFullPageAppearance]);
|
|
383
|
-
var itemStyle = (0, _react.useMemo)(function () {
|
|
384
|
-
return {
|
|
385
|
-
position: 'relative',
|
|
386
|
-
boxSizing: 'border-box',
|
|
387
|
-
minWidth: "".concat((0, _colgroup.getResizerMinWidth)(node), "px"),
|
|
388
|
-
maxWidth: (0, _misc.getTableResizerContainerMaxWidthInCSS)(isCommentEditor, isChromelessEditor, isTableScalingEnabled),
|
|
389
|
-
width: (0, _misc.getTableResizerItemWidthInCSS)(node, isCommentEditor, isChromelessEditor)
|
|
390
|
-
};
|
|
391
|
-
}, [node, isCommentEditor, isChromelessEditor, isTableScalingEnabled]);
|
|
392
|
-
return /*#__PURE__*/_react.default.createElement(AlignmentTableContainerWrapper, {
|
|
393
|
-
isTableAlignmentEnabled: isTableAlignmentEnabled,
|
|
394
|
-
node: node,
|
|
395
|
-
pluginInjectionApi: pluginInjectionApi,
|
|
396
|
-
getPos: getPos,
|
|
397
|
-
editorView: editorView
|
|
398
|
-
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
399
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
|
|
400
|
-
className: _types.TableCssClassName.TABLE_RESIZER_CONTAINER
|
|
401
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
|
|
402
|
-
,
|
|
403
|
-
style: containerStyle
|
|
404
|
-
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
405
|
-
// `display-handle` carries no handle to show here, but it keeps this element matching both
|
|
406
|
-
// `toDOM` and the `.resizer-item.display-handle` lookup in `measureTableWithAutoLayout`.
|
|
407
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
|
|
408
|
-
className: (0, _classnames.default)(_resizer.resizerItemClassName, 'display-handle')
|
|
409
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
|
|
410
|
-
,
|
|
411
|
-
style: itemStyle
|
|
412
|
-
}, /*#__PURE__*/_react.default.createElement("span", {
|
|
413
|
-
className: _resizer.resizerHoverZoneClassName
|
|
414
|
-
}, /*#__PURE__*/_react.default.createElement(InnerContainer
|
|
415
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
|
|
416
|
-
, {
|
|
417
|
-
className: className,
|
|
418
|
-
node: node
|
|
419
|
-
}, children)))));
|
|
420
|
-
};
|
|
421
|
-
var TableContainer = exports.TableContainer = function TableContainer(_ref6) {
|
|
422
|
-
var children = _ref6.children,
|
|
423
|
-
node = _ref6.node,
|
|
424
|
-
className = _ref6.className,
|
|
425
|
-
_ref6$containerWidth = _ref6.containerWidth,
|
|
426
|
-
editorWidth = _ref6$containerWidth.width,
|
|
427
|
-
lineLength = _ref6$containerWidth.lineLength,
|
|
428
|
-
editorView = _ref6.editorView,
|
|
429
|
-
getPos = _ref6.getPos,
|
|
430
|
-
tableRef = _ref6.tableRef,
|
|
431
|
-
isNested = _ref6.isNested,
|
|
432
|
-
tableWrapperHeight = _ref6.tableWrapperHeight,
|
|
433
|
-
isResizing = _ref6.isResizing,
|
|
434
|
-
pluginInjectionApi = _ref6.pluginInjectionApi,
|
|
435
|
-
isWholeTableInDanger = _ref6.isWholeTableInDanger,
|
|
436
|
-
isTableResizingEnabled = _ref6.isTableResizingEnabled,
|
|
437
|
-
isTableScalingEnabled = _ref6.isTableScalingEnabled,
|
|
438
|
-
allowFixedColumnWidthOption = _ref6.allowFixedColumnWidthOption,
|
|
439
|
-
isTableAlignmentEnabled = _ref6.isTableAlignmentEnabled,
|
|
440
|
-
shouldUseIncreasedScalingPercent = _ref6.shouldUseIncreasedScalingPercent,
|
|
441
|
-
isCommentEditor = _ref6.isCommentEditor,
|
|
442
|
-
isChromelessEditor = _ref6.isChromelessEditor;
|
|
443
|
-
// Limited mode drops the whole-table resizer only; column resizing is untouched.
|
|
444
|
-
var isTableWidthResizingDisabled = (0, _useIsTableInLimitedMode.useIsTableInLimitedMode)(pluginInjectionApi, editorView);
|
|
445
368
|
if (isTableResizingEnabled && !isNested) {
|
|
446
|
-
if (isTableWidthResizingDisabled) {
|
|
447
|
-
return /*#__PURE__*/_react.default.createElement(StaticTableContainer
|
|
448
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
|
|
449
|
-
, {
|
|
450
|
-
className: className,
|
|
451
|
-
node: node,
|
|
452
|
-
editorView: editorView,
|
|
453
|
-
getPos: getPos,
|
|
454
|
-
pluginInjectionApi: pluginInjectionApi,
|
|
455
|
-
isTableScalingEnabled: isTableScalingEnabled,
|
|
456
|
-
isTableAlignmentEnabled: isTableAlignmentEnabled,
|
|
457
|
-
isCommentEditor: isCommentEditor,
|
|
458
|
-
isChromelessEditor: isChromelessEditor
|
|
459
|
-
}, children);
|
|
460
|
-
}
|
|
461
369
|
return /*#__PURE__*/_react.default.createElement(ResizableTableContainer
|
|
462
370
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
|
|
463
371
|
, {
|
|
@@ -26,7 +26,6 @@ var _mergedCells = require("../../pm-plugins/utils/merged-cells");
|
|
|
26
26
|
var _types = require("../../types");
|
|
27
27
|
var _consts = require("../consts");
|
|
28
28
|
var _DragPreview = require("../DragPreview");
|
|
29
|
-
var _useIsTableInLimitedMode = require("../hooks/useIsTableInLimitedMode");
|
|
30
29
|
var _HandleIconComponent = require("./HandleIconComponent");
|
|
31
30
|
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
|
|
32
31
|
/* eslint-disable @atlaskit/design-system/no-html-button */
|
|
@@ -67,13 +66,6 @@ var DragHandleComponent = function DragHandleComponent(_ref) {
|
|
|
67
66
|
_useState4 = (0, _slicedToArray2.default)(_useState3, 2),
|
|
68
67
|
isHovered = _useState4[0],
|
|
69
68
|
setIsHovered = _useState4[1];
|
|
70
|
-
|
|
71
|
-
// Limited mode disables dragging rows and columns, but the handle itself keeps working as the
|
|
72
|
-
// selection and menu affordance. The hook subscribes to limited mode (rather than reading the
|
|
73
|
-
// plugin state once) so the effect below re-runs and un-registers the draggable if limited mode
|
|
74
|
-
// flips mid-session.
|
|
75
|
-
var isInLimitedMode = (0, _useIsTableInLimitedMode.useIsTableInLimitedMode)(api, editorView);
|
|
76
|
-
var isDraggingEnabled = !isInLimitedMode;
|
|
77
69
|
var isRow = direction === 'row';
|
|
78
70
|
var isColumn = direction === 'column';
|
|
79
71
|
var hasMergedCells = (0, _react.useMemo)(function () {
|
|
@@ -116,12 +108,6 @@ var DragHandleComponent = function DragHandleComponent(_ref) {
|
|
|
116
108
|
(0, _react.useEffect)(function () {
|
|
117
109
|
var dragHandleDivRefCurrent = dragHandleDivRef.current;
|
|
118
110
|
var browser = (0, _browser.getBrowserInfo)();
|
|
119
|
-
|
|
120
|
-
// Skipping the registration entirely (rather than returning false from `canDrag`) means the
|
|
121
|
-
// `draggable="true"` attribute is never added, so no drag can start from the handle at all.
|
|
122
|
-
if (!isDraggingEnabled) {
|
|
123
|
-
return;
|
|
124
|
-
}
|
|
125
111
|
if (dragHandleDivRefCurrent) {
|
|
126
112
|
return (0, _elementAdapter.draggable)({
|
|
127
113
|
element: dragHandleDivRefCurrent,
|
|
@@ -174,7 +160,7 @@ var DragHandleComponent = function DragHandleComponent(_ref) {
|
|
|
174
160
|
}
|
|
175
161
|
});
|
|
176
162
|
}
|
|
177
|
-
}, [tableLocalId, direction, indexes, isRow, editorView.state.selection, hasMergedCells
|
|
163
|
+
}, [tableLocalId, direction, indexes, isRow, editorView.state.selection, hasMergedCells]);
|
|
178
164
|
var showDragMenuAnchorId = isRow ? 'drag-handle-button-row' : 'drag-handle-button-column';
|
|
179
165
|
var browser = (0, _browser.getBrowserInfo)();
|
|
180
166
|
|
|
@@ -4,17 +4,14 @@ import classNames from 'classnames';
|
|
|
4
4
|
import { INPUT_METHOD } from '@atlaskit/editor-common/analytics/types/enums';
|
|
5
5
|
import { CHANGE_ALIGNMENT_REASON } from '@atlaskit/editor-common/analytics/types/table-events';
|
|
6
6
|
import { getTableContainerWidth } from '@atlaskit/editor-common/node-width';
|
|
7
|
-
import { resizerHoverZoneClassName, resizerItemClassName } from '@atlaskit/editor-common/styles/resizer';
|
|
8
7
|
import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/useSharedPluginStateWithSelector';
|
|
9
8
|
import { akEditorDefaultLayoutWidth, akEditorGutterPaddingDynamic, akEditorGutterPaddingReduced, akEditorFullPageNarrowBreakout, akEditorMobileBreakoutPoint } from '@atlaskit/editor-shared-styles/constants';
|
|
10
9
|
import { editorExperiment } from '@atlaskit/tmp-editor-statsig/editor-experiment';
|
|
11
10
|
import { setTableAlignmentWithTableContentWithPosWithAnalytics } from '../pm-plugins/commands/commands-with-analytics';
|
|
12
|
-
import { getResizerMinWidth } from '../pm-plugins/table-resizing/utils/colgroup';
|
|
13
11
|
import { TABLE_MAX_WIDTH, TABLE_OFFSET_IN_COMMENT_EDITOR, RESIZE_HANDLE_SPACING } from '../pm-plugins/table-resizing/utils/consts';
|
|
14
|
-
import { getTableResizerContainerMaxWidthInCSS, getTableResizerContainerForFullPageWidthInCSS
|
|
12
|
+
import { getTableResizerContainerMaxWidthInCSS, getTableResizerContainerForFullPageWidthInCSS } from '../pm-plugins/table-resizing/utils/misc';
|
|
15
13
|
import { ALIGN_CENTER, ALIGN_START } from '../pm-plugins/utils/alignment';
|
|
16
14
|
import { TableCssClassName as ClassName } from '../types';
|
|
17
|
-
import { useIsTableInLimitedMode } from '../ui/hooks/useIsTableInLimitedMode';
|
|
18
15
|
import { getAlignmentStyle } from './table-container-styles';
|
|
19
16
|
import { TableResizer } from './TableResizer';
|
|
20
17
|
const InnerContainer = /*#__PURE__*/forwardRef(({
|
|
@@ -340,75 +337,6 @@ export const ResizableTableContainer = /*#__PURE__*/React.memo(({
|
|
|
340
337
|
node: node
|
|
341
338
|
}, children))));
|
|
342
339
|
});
|
|
343
|
-
/**
|
|
344
|
-
* Stand-in for `ResizableTableContainer`, used when limited mode has disabled resizing the table as
|
|
345
|
-
* a whole. Column resizing is unaffected and keeps working through the cell decorations.
|
|
346
|
-
*
|
|
347
|
-
* It reproduces the same DOM and CSS that `toDOM` renders for a resizable table
|
|
348
|
-
* (`.pm-table-resizer-container` > `.resizer-item` > `.resizer-hover-zone`) so that swapping the
|
|
349
|
-
* nodeView in over the initial ProseMirror render leaves the table exactly where it was — and so
|
|
350
|
-
* that the column resize handles still find the elements they measure against — but it mounts no
|
|
351
|
-
* `TableResizer`, so there is no `re-resizable` instance, no table width handle, no handle tooltip,
|
|
352
|
-
* no `clientHeight` read for the handle size and no per-table subscription to the interaction and
|
|
353
|
-
* table shared states.
|
|
354
|
-
*
|
|
355
|
-
* Every width here comes from the same pure-CSS helpers `toDOM` uses, so unlike
|
|
356
|
-
* `ResizableTableContainer` it needs no measured container width and does no layout maths.
|
|
357
|
-
*/
|
|
358
|
-
const StaticTableContainer = ({
|
|
359
|
-
children,
|
|
360
|
-
className,
|
|
361
|
-
node,
|
|
362
|
-
editorView,
|
|
363
|
-
getPos,
|
|
364
|
-
pluginInjectionApi,
|
|
365
|
-
isTableScalingEnabled,
|
|
366
|
-
isTableAlignmentEnabled,
|
|
367
|
-
isCommentEditor,
|
|
368
|
-
isChromelessEditor
|
|
369
|
-
}) => {
|
|
370
|
-
const isFullPageAppearance = !isCommentEditor && !isChromelessEditor;
|
|
371
|
-
const containerStyle = useMemo(() => ({
|
|
372
|
-
'--ak-editor-table-gutter-padding': 'calc(var(--ak-editor--large-gutter-padding) * 2)',
|
|
373
|
-
'--ak-editor-table-width': isFullPageAppearance ? getTableResizerContainerForFullPageWidthInCSS(node, isTableScalingEnabled) : `calc(100cqw - calc(var(--ak-editor--large-gutter-padding) * 2))`,
|
|
374
|
-
width: 'var(--ak-editor-table-width)'
|
|
375
|
-
}), [node, isTableScalingEnabled, isFullPageAppearance]);
|
|
376
|
-
const itemStyle = useMemo(() => ({
|
|
377
|
-
position: 'relative',
|
|
378
|
-
boxSizing: 'border-box',
|
|
379
|
-
minWidth: `${getResizerMinWidth(node)}px`,
|
|
380
|
-
maxWidth: getTableResizerContainerMaxWidthInCSS(isCommentEditor, isChromelessEditor, isTableScalingEnabled),
|
|
381
|
-
width: getTableResizerItemWidthInCSS(node, isCommentEditor, isChromelessEditor)
|
|
382
|
-
}), [node, isCommentEditor, isChromelessEditor, isTableScalingEnabled]);
|
|
383
|
-
return /*#__PURE__*/React.createElement(AlignmentTableContainerWrapper, {
|
|
384
|
-
isTableAlignmentEnabled: isTableAlignmentEnabled,
|
|
385
|
-
node: node,
|
|
386
|
-
pluginInjectionApi: pluginInjectionApi,
|
|
387
|
-
getPos: getPos,
|
|
388
|
-
editorView: editorView
|
|
389
|
-
}, /*#__PURE__*/React.createElement("div", {
|
|
390
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
|
|
391
|
-
className: ClassName.TABLE_RESIZER_CONTAINER
|
|
392
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
|
|
393
|
-
,
|
|
394
|
-
style: containerStyle
|
|
395
|
-
}, /*#__PURE__*/React.createElement("div", {
|
|
396
|
-
// `display-handle` carries no handle to show here, but it keeps this element matching both
|
|
397
|
-
// `toDOM` and the `.resizer-item.display-handle` lookup in `measureTableWithAutoLayout`.
|
|
398
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
|
|
399
|
-
className: classNames(resizerItemClassName, 'display-handle')
|
|
400
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
|
|
401
|
-
,
|
|
402
|
-
style: itemStyle
|
|
403
|
-
}, /*#__PURE__*/React.createElement("span", {
|
|
404
|
-
className: resizerHoverZoneClassName
|
|
405
|
-
}, /*#__PURE__*/React.createElement(InnerContainer
|
|
406
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
|
|
407
|
-
, {
|
|
408
|
-
className: className,
|
|
409
|
-
node: node
|
|
410
|
-
}, children)))));
|
|
411
|
-
};
|
|
412
340
|
export const TableContainer = ({
|
|
413
341
|
children,
|
|
414
342
|
node,
|
|
@@ -433,24 +361,7 @@ export const TableContainer = ({
|
|
|
433
361
|
isCommentEditor,
|
|
434
362
|
isChromelessEditor
|
|
435
363
|
}) => {
|
|
436
|
-
// Limited mode drops the whole-table resizer only; column resizing is untouched.
|
|
437
|
-
const isTableWidthResizingDisabled = useIsTableInLimitedMode(pluginInjectionApi, editorView);
|
|
438
364
|
if (isTableResizingEnabled && !isNested) {
|
|
439
|
-
if (isTableWidthResizingDisabled) {
|
|
440
|
-
return /*#__PURE__*/React.createElement(StaticTableContainer
|
|
441
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
|
|
442
|
-
, {
|
|
443
|
-
className: className,
|
|
444
|
-
node: node,
|
|
445
|
-
editorView: editorView,
|
|
446
|
-
getPos: getPos,
|
|
447
|
-
pluginInjectionApi: pluginInjectionApi,
|
|
448
|
-
isTableScalingEnabled: isTableScalingEnabled,
|
|
449
|
-
isTableAlignmentEnabled: isTableAlignmentEnabled,
|
|
450
|
-
isCommentEditor: isCommentEditor,
|
|
451
|
-
isChromelessEditor: isChromelessEditor
|
|
452
|
-
}, children);
|
|
453
|
-
}
|
|
454
365
|
return /*#__PURE__*/React.createElement(ResizableTableContainer
|
|
455
366
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
|
|
456
367
|
, {
|
|
@@ -18,7 +18,6 @@ import { findDuplicatePosition, hasMergedCellsInSelection } from '../../pm-plugi
|
|
|
18
18
|
import { TableCssClassName as ClassName } from '../../types';
|
|
19
19
|
import { dragTableInsertColumnButtonSize } from '../consts';
|
|
20
20
|
import { DragPreview } from '../DragPreview';
|
|
21
|
-
import { useIsTableInLimitedMode } from '../hooks/useIsTableInLimitedMode';
|
|
22
21
|
import { HandleIconComponent } from './HandleIconComponent';
|
|
23
22
|
const DragHandleComponent = ({
|
|
24
23
|
api,
|
|
@@ -54,13 +53,6 @@ const DragHandleComponent = ({
|
|
|
54
53
|
isDragMenuOpen = false
|
|
55
54
|
} = getDnDPluginState(state);
|
|
56
55
|
const [isHovered, setIsHovered] = useState(false);
|
|
57
|
-
|
|
58
|
-
// Limited mode disables dragging rows and columns, but the handle itself keeps working as the
|
|
59
|
-
// selection and menu affordance. The hook subscribes to limited mode (rather than reading the
|
|
60
|
-
// plugin state once) so the effect below re-runs and un-registers the draggable if limited mode
|
|
61
|
-
// flips mid-session.
|
|
62
|
-
const isInLimitedMode = useIsTableInLimitedMode(api, editorView);
|
|
63
|
-
const isDraggingEnabled = !isInLimitedMode;
|
|
64
56
|
const isRow = direction === 'row';
|
|
65
57
|
const isColumn = direction === 'column';
|
|
66
58
|
const hasMergedCells = useMemo(() => {
|
|
@@ -103,12 +95,6 @@ const DragHandleComponent = ({
|
|
|
103
95
|
useEffect(() => {
|
|
104
96
|
const dragHandleDivRefCurrent = dragHandleDivRef.current;
|
|
105
97
|
const browser = getBrowserInfo();
|
|
106
|
-
|
|
107
|
-
// Skipping the registration entirely (rather than returning false from `canDrag`) means the
|
|
108
|
-
// `draggable="true"` attribute is never added, so no drag can start from the handle at all.
|
|
109
|
-
if (!isDraggingEnabled) {
|
|
110
|
-
return;
|
|
111
|
-
}
|
|
112
98
|
if (dragHandleDivRefCurrent) {
|
|
113
99
|
return draggable({
|
|
114
100
|
element: dragHandleDivRefCurrent,
|
|
@@ -162,7 +148,7 @@ const DragHandleComponent = ({
|
|
|
162
148
|
}
|
|
163
149
|
});
|
|
164
150
|
}
|
|
165
|
-
}, [tableLocalId, direction, indexes, isRow, editorView.state.selection, hasMergedCells
|
|
151
|
+
}, [tableLocalId, direction, indexes, isRow, editorView.state.selection, hasMergedCells]);
|
|
166
152
|
const showDragMenuAnchorId = isRow ? 'drag-handle-button-row' : 'drag-handle-button-column';
|
|
167
153
|
const browser = getBrowserInfo();
|
|
168
154
|
|
|
@@ -5,17 +5,14 @@ import classNames from 'classnames';
|
|
|
5
5
|
import { INPUT_METHOD } from '@atlaskit/editor-common/analytics/types/enums';
|
|
6
6
|
import { CHANGE_ALIGNMENT_REASON } from '@atlaskit/editor-common/analytics/types/table-events';
|
|
7
7
|
import { getTableContainerWidth } from '@atlaskit/editor-common/node-width';
|
|
8
|
-
import { resizerHoverZoneClassName, resizerItemClassName } from '@atlaskit/editor-common/styles/resizer';
|
|
9
8
|
import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/useSharedPluginStateWithSelector';
|
|
10
9
|
import { akEditorDefaultLayoutWidth, akEditorGutterPaddingDynamic, akEditorGutterPaddingReduced, akEditorFullPageNarrowBreakout, akEditorMobileBreakoutPoint } from '@atlaskit/editor-shared-styles/constants';
|
|
11
10
|
import { editorExperiment } from '@atlaskit/tmp-editor-statsig/editor-experiment';
|
|
12
11
|
import { setTableAlignmentWithTableContentWithPosWithAnalytics } from '../pm-plugins/commands/commands-with-analytics';
|
|
13
|
-
import { getResizerMinWidth } from '../pm-plugins/table-resizing/utils/colgroup';
|
|
14
12
|
import { TABLE_MAX_WIDTH, TABLE_OFFSET_IN_COMMENT_EDITOR, RESIZE_HANDLE_SPACING } from '../pm-plugins/table-resizing/utils/consts';
|
|
15
|
-
import { getTableResizerContainerMaxWidthInCSS, getTableResizerContainerForFullPageWidthInCSS
|
|
13
|
+
import { getTableResizerContainerMaxWidthInCSS, getTableResizerContainerForFullPageWidthInCSS } from '../pm-plugins/table-resizing/utils/misc';
|
|
16
14
|
import { ALIGN_CENTER, ALIGN_START } from '../pm-plugins/utils/alignment';
|
|
17
15
|
import { TableCssClassName as ClassName } from '../types';
|
|
18
|
-
import { useIsTableInLimitedMode } from '../ui/hooks/useIsTableInLimitedMode';
|
|
19
16
|
import { getAlignmentStyle } from './table-container-styles';
|
|
20
17
|
import { TableResizer } from './TableResizer';
|
|
21
18
|
var InnerContainer = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
@@ -337,118 +334,29 @@ export var ResizableTableContainer = /*#__PURE__*/React.memo(function (_ref4) {
|
|
|
337
334
|
node: node
|
|
338
335
|
}, children))));
|
|
339
336
|
});
|
|
340
|
-
|
|
341
|
-
* Stand-in for `ResizableTableContainer`, used when limited mode has disabled resizing the table as
|
|
342
|
-
* a whole. Column resizing is unaffected and keeps working through the cell decorations.
|
|
343
|
-
*
|
|
344
|
-
* It reproduces the same DOM and CSS that `toDOM` renders for a resizable table
|
|
345
|
-
* (`.pm-table-resizer-container` > `.resizer-item` > `.resizer-hover-zone`) so that swapping the
|
|
346
|
-
* nodeView in over the initial ProseMirror render leaves the table exactly where it was — and so
|
|
347
|
-
* that the column resize handles still find the elements they measure against — but it mounts no
|
|
348
|
-
* `TableResizer`, so there is no `re-resizable` instance, no table width handle, no handle tooltip,
|
|
349
|
-
* no `clientHeight` read for the handle size and no per-table subscription to the interaction and
|
|
350
|
-
* table shared states.
|
|
351
|
-
*
|
|
352
|
-
* Every width here comes from the same pure-CSS helpers `toDOM` uses, so unlike
|
|
353
|
-
* `ResizableTableContainer` it needs no measured container width and does no layout maths.
|
|
354
|
-
*/
|
|
355
|
-
var StaticTableContainer = function StaticTableContainer(_ref5) {
|
|
337
|
+
export var TableContainer = function TableContainer(_ref5) {
|
|
356
338
|
var children = _ref5.children,
|
|
357
|
-
className = _ref5.className,
|
|
358
339
|
node = _ref5.node,
|
|
340
|
+
className = _ref5.className,
|
|
341
|
+
_ref5$containerWidth = _ref5.containerWidth,
|
|
342
|
+
editorWidth = _ref5$containerWidth.width,
|
|
343
|
+
lineLength = _ref5$containerWidth.lineLength,
|
|
359
344
|
editorView = _ref5.editorView,
|
|
360
345
|
getPos = _ref5.getPos,
|
|
346
|
+
tableRef = _ref5.tableRef,
|
|
347
|
+
isNested = _ref5.isNested,
|
|
348
|
+
tableWrapperHeight = _ref5.tableWrapperHeight,
|
|
349
|
+
isResizing = _ref5.isResizing,
|
|
361
350
|
pluginInjectionApi = _ref5.pluginInjectionApi,
|
|
351
|
+
isWholeTableInDanger = _ref5.isWholeTableInDanger,
|
|
352
|
+
isTableResizingEnabled = _ref5.isTableResizingEnabled,
|
|
362
353
|
isTableScalingEnabled = _ref5.isTableScalingEnabled,
|
|
354
|
+
allowFixedColumnWidthOption = _ref5.allowFixedColumnWidthOption,
|
|
363
355
|
isTableAlignmentEnabled = _ref5.isTableAlignmentEnabled,
|
|
356
|
+
shouldUseIncreasedScalingPercent = _ref5.shouldUseIncreasedScalingPercent,
|
|
364
357
|
isCommentEditor = _ref5.isCommentEditor,
|
|
365
358
|
isChromelessEditor = _ref5.isChromelessEditor;
|
|
366
|
-
var isFullPageAppearance = !isCommentEditor && !isChromelessEditor;
|
|
367
|
-
var containerStyle = useMemo(function () {
|
|
368
|
-
return {
|
|
369
|
-
'--ak-editor-table-gutter-padding': 'calc(var(--ak-editor--large-gutter-padding) * 2)',
|
|
370
|
-
'--ak-editor-table-width': isFullPageAppearance ? getTableResizerContainerForFullPageWidthInCSS(node, isTableScalingEnabled) : "calc(100cqw - calc(var(--ak-editor--large-gutter-padding) * 2))",
|
|
371
|
-
width: 'var(--ak-editor-table-width)'
|
|
372
|
-
};
|
|
373
|
-
}, [node, isTableScalingEnabled, isFullPageAppearance]);
|
|
374
|
-
var itemStyle = useMemo(function () {
|
|
375
|
-
return {
|
|
376
|
-
position: 'relative',
|
|
377
|
-
boxSizing: 'border-box',
|
|
378
|
-
minWidth: "".concat(getResizerMinWidth(node), "px"),
|
|
379
|
-
maxWidth: getTableResizerContainerMaxWidthInCSS(isCommentEditor, isChromelessEditor, isTableScalingEnabled),
|
|
380
|
-
width: getTableResizerItemWidthInCSS(node, isCommentEditor, isChromelessEditor)
|
|
381
|
-
};
|
|
382
|
-
}, [node, isCommentEditor, isChromelessEditor, isTableScalingEnabled]);
|
|
383
|
-
return /*#__PURE__*/React.createElement(AlignmentTableContainerWrapper, {
|
|
384
|
-
isTableAlignmentEnabled: isTableAlignmentEnabled,
|
|
385
|
-
node: node,
|
|
386
|
-
pluginInjectionApi: pluginInjectionApi,
|
|
387
|
-
getPos: getPos,
|
|
388
|
-
editorView: editorView
|
|
389
|
-
}, /*#__PURE__*/React.createElement("div", {
|
|
390
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
|
|
391
|
-
className: ClassName.TABLE_RESIZER_CONTAINER
|
|
392
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
|
|
393
|
-
,
|
|
394
|
-
style: containerStyle
|
|
395
|
-
}, /*#__PURE__*/React.createElement("div", {
|
|
396
|
-
// `display-handle` carries no handle to show here, but it keeps this element matching both
|
|
397
|
-
// `toDOM` and the `.resizer-item.display-handle` lookup in `measureTableWithAutoLayout`.
|
|
398
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
|
|
399
|
-
className: classNames(resizerItemClassName, 'display-handle')
|
|
400
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
|
|
401
|
-
,
|
|
402
|
-
style: itemStyle
|
|
403
|
-
}, /*#__PURE__*/React.createElement("span", {
|
|
404
|
-
className: resizerHoverZoneClassName
|
|
405
|
-
}, /*#__PURE__*/React.createElement(InnerContainer
|
|
406
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
|
|
407
|
-
, {
|
|
408
|
-
className: className,
|
|
409
|
-
node: node
|
|
410
|
-
}, children)))));
|
|
411
|
-
};
|
|
412
|
-
export var TableContainer = function TableContainer(_ref6) {
|
|
413
|
-
var children = _ref6.children,
|
|
414
|
-
node = _ref6.node,
|
|
415
|
-
className = _ref6.className,
|
|
416
|
-
_ref6$containerWidth = _ref6.containerWidth,
|
|
417
|
-
editorWidth = _ref6$containerWidth.width,
|
|
418
|
-
lineLength = _ref6$containerWidth.lineLength,
|
|
419
|
-
editorView = _ref6.editorView,
|
|
420
|
-
getPos = _ref6.getPos,
|
|
421
|
-
tableRef = _ref6.tableRef,
|
|
422
|
-
isNested = _ref6.isNested,
|
|
423
|
-
tableWrapperHeight = _ref6.tableWrapperHeight,
|
|
424
|
-
isResizing = _ref6.isResizing,
|
|
425
|
-
pluginInjectionApi = _ref6.pluginInjectionApi,
|
|
426
|
-
isWholeTableInDanger = _ref6.isWholeTableInDanger,
|
|
427
|
-
isTableResizingEnabled = _ref6.isTableResizingEnabled,
|
|
428
|
-
isTableScalingEnabled = _ref6.isTableScalingEnabled,
|
|
429
|
-
allowFixedColumnWidthOption = _ref6.allowFixedColumnWidthOption,
|
|
430
|
-
isTableAlignmentEnabled = _ref6.isTableAlignmentEnabled,
|
|
431
|
-
shouldUseIncreasedScalingPercent = _ref6.shouldUseIncreasedScalingPercent,
|
|
432
|
-
isCommentEditor = _ref6.isCommentEditor,
|
|
433
|
-
isChromelessEditor = _ref6.isChromelessEditor;
|
|
434
|
-
// Limited mode drops the whole-table resizer only; column resizing is untouched.
|
|
435
|
-
var isTableWidthResizingDisabled = useIsTableInLimitedMode(pluginInjectionApi, editorView);
|
|
436
359
|
if (isTableResizingEnabled && !isNested) {
|
|
437
|
-
if (isTableWidthResizingDisabled) {
|
|
438
|
-
return /*#__PURE__*/React.createElement(StaticTableContainer
|
|
439
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
|
|
440
|
-
, {
|
|
441
|
-
className: className,
|
|
442
|
-
node: node,
|
|
443
|
-
editorView: editorView,
|
|
444
|
-
getPos: getPos,
|
|
445
|
-
pluginInjectionApi: pluginInjectionApi,
|
|
446
|
-
isTableScalingEnabled: isTableScalingEnabled,
|
|
447
|
-
isTableAlignmentEnabled: isTableAlignmentEnabled,
|
|
448
|
-
isCommentEditor: isCommentEditor,
|
|
449
|
-
isChromelessEditor: isChromelessEditor
|
|
450
|
-
}, children);
|
|
451
|
-
}
|
|
452
360
|
return /*#__PURE__*/React.createElement(ResizableTableContainer
|
|
453
361
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
|
|
454
362
|
, {
|
|
@@ -20,7 +20,6 @@ import { findDuplicatePosition, hasMergedCellsInSelection } from '../../pm-plugi
|
|
|
20
20
|
import { TableCssClassName as ClassName } from '../../types';
|
|
21
21
|
import { dragTableInsertColumnButtonSize } from '../consts';
|
|
22
22
|
import { DragPreview } from '../DragPreview';
|
|
23
|
-
import { useIsTableInLimitedMode } from '../hooks/useIsTableInLimitedMode';
|
|
24
23
|
import { HandleIconComponent } from './HandleIconComponent';
|
|
25
24
|
var DragHandleComponent = function DragHandleComponent(_ref) {
|
|
26
25
|
var api = _ref.api,
|
|
@@ -58,13 +57,6 @@ var DragHandleComponent = function DragHandleComponent(_ref) {
|
|
|
58
57
|
_useState4 = _slicedToArray(_useState3, 2),
|
|
59
58
|
isHovered = _useState4[0],
|
|
60
59
|
setIsHovered = _useState4[1];
|
|
61
|
-
|
|
62
|
-
// Limited mode disables dragging rows and columns, but the handle itself keeps working as the
|
|
63
|
-
// selection and menu affordance. The hook subscribes to limited mode (rather than reading the
|
|
64
|
-
// plugin state once) so the effect below re-runs and un-registers the draggable if limited mode
|
|
65
|
-
// flips mid-session.
|
|
66
|
-
var isInLimitedMode = useIsTableInLimitedMode(api, editorView);
|
|
67
|
-
var isDraggingEnabled = !isInLimitedMode;
|
|
68
60
|
var isRow = direction === 'row';
|
|
69
61
|
var isColumn = direction === 'column';
|
|
70
62
|
var hasMergedCells = useMemo(function () {
|
|
@@ -107,12 +99,6 @@ var DragHandleComponent = function DragHandleComponent(_ref) {
|
|
|
107
99
|
useEffect(function () {
|
|
108
100
|
var dragHandleDivRefCurrent = dragHandleDivRef.current;
|
|
109
101
|
var browser = getBrowserInfo();
|
|
110
|
-
|
|
111
|
-
// Skipping the registration entirely (rather than returning false from `canDrag`) means the
|
|
112
|
-
// `draggable="true"` attribute is never added, so no drag can start from the handle at all.
|
|
113
|
-
if (!isDraggingEnabled) {
|
|
114
|
-
return;
|
|
115
|
-
}
|
|
116
102
|
if (dragHandleDivRefCurrent) {
|
|
117
103
|
return draggable({
|
|
118
104
|
element: dragHandleDivRefCurrent,
|
|
@@ -165,7 +151,7 @@ var DragHandleComponent = function DragHandleComponent(_ref) {
|
|
|
165
151
|
}
|
|
166
152
|
});
|
|
167
153
|
}
|
|
168
|
-
}, [tableLocalId, direction, indexes, isRow, editorView.state.selection, hasMergedCells
|
|
154
|
+
}, [tableLocalId, direction, indexes, isRow, editorView.state.selection, hasMergedCells]);
|
|
169
155
|
var showDragMenuAnchorId = isRow ? 'drag-handle-button-row' : 'drag-handle-button-column';
|
|
170
156
|
var browser = getBrowserInfo();
|
|
171
157
|
|
package/package.json
CHANGED
|
@@ -1,20 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
exports.useIsTableInLimitedMode = void 0;
|
|
7
|
-
var _useSharedPluginStateWithSelector = require("@atlaskit/editor-common/useSharedPluginStateWithSelector");
|
|
8
|
-
var _isExperimentEnabled = require("@atlaskit/platform-feature-experiments/is-experiment-enabled");
|
|
9
|
-
/**
|
|
10
|
-
* Limited mode strips expensive behaviour on very large documents. For tables that means dragging
|
|
11
|
-
* rows and columns is turned off, and so is resizing the table as a whole. Column resizing is left
|
|
12
|
-
* alone — only the whole-table resizer goes away.
|
|
13
|
-
*/
|
|
14
|
-
var useIsTableInLimitedMode = exports.useIsTableInLimitedMode = function useIsTableInLimitedMode(api, editorView) {
|
|
15
|
-
var enabled = (0, _useSharedPluginStateWithSelector.useSharedPluginStateWithSelector)(api, ['limitedMode'], function (states) {
|
|
16
|
-
var _states$limitedModeSt;
|
|
17
|
-
return !!((_states$limitedModeSt = states.limitedModeState) !== null && _states$limitedModeSt !== void 0 && _states$limitedModeSt.enabled);
|
|
18
|
-
});
|
|
19
|
-
return enabled && (0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_table_limited_mode');
|
|
20
|
-
};
|
|
@@ -1,14 +0,0 @@
|
|
|
1
|
-
import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/useSharedPluginStateWithSelector';
|
|
2
|
-
import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
|
|
3
|
-
/**
|
|
4
|
-
* Limited mode strips expensive behaviour on very large documents. For tables that means dragging
|
|
5
|
-
* rows and columns is turned off, and so is resizing the table as a whole. Column resizing is left
|
|
6
|
-
* alone — only the whole-table resizer goes away.
|
|
7
|
-
*/
|
|
8
|
-
export const useIsTableInLimitedMode = (api, editorView) => {
|
|
9
|
-
const enabled = useSharedPluginStateWithSelector(api, ['limitedMode'], states => {
|
|
10
|
-
var _states$limitedModeSt;
|
|
11
|
-
return !!((_states$limitedModeSt = states.limitedModeState) !== null && _states$limitedModeSt !== void 0 && _states$limitedModeSt.enabled);
|
|
12
|
-
});
|
|
13
|
-
return enabled && isExperimentEnabled('platform_editor_table_limited_mode');
|
|
14
|
-
};
|
|
@@ -1,14 +0,0 @@
|
|
|
1
|
-
import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/useSharedPluginStateWithSelector';
|
|
2
|
-
import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
|
|
3
|
-
/**
|
|
4
|
-
* Limited mode strips expensive behaviour on very large documents. For tables that means dragging
|
|
5
|
-
* rows and columns is turned off, and so is resizing the table as a whole. Column resizing is left
|
|
6
|
-
* alone — only the whole-table resizer goes away.
|
|
7
|
-
*/
|
|
8
|
-
export var useIsTableInLimitedMode = function useIsTableInLimitedMode(api, editorView) {
|
|
9
|
-
var enabled = useSharedPluginStateWithSelector(api, ['limitedMode'], function (states) {
|
|
10
|
-
var _states$limitedModeSt;
|
|
11
|
-
return !!((_states$limitedModeSt = states.limitedModeState) !== null && _states$limitedModeSt !== void 0 && _states$limitedModeSt.enabled);
|
|
12
|
-
});
|
|
13
|
-
return enabled && isExperimentEnabled('platform_editor_table_limited_mode');
|
|
14
|
-
};
|
|
@@ -1,8 +0,0 @@
|
|
|
1
|
-
import type { EditorView } from '@atlaskit/editor-prosemirror/view';
|
|
2
|
-
import type { PluginInjectionAPI } from '../../types';
|
|
3
|
-
/**
|
|
4
|
-
* Limited mode strips expensive behaviour on very large documents. For tables that means dragging
|
|
5
|
-
* rows and columns is turned off, and so is resizing the table as a whole. Column resizing is left
|
|
6
|
-
* alone — only the whole-table resizer goes away.
|
|
7
|
-
*/
|
|
8
|
-
export declare const useIsTableInLimitedMode: (api: PluginInjectionAPI | undefined | null, editorView: EditorView) => boolean;
|