@atlaskit/editor-plugin-table 25.0.0 → 25.0.1
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/ui/TableFloatingControls/index.js +1 -17
- package/dist/es2019/ui/TableFloatingControls/index.js +1 -17
- package/dist/esm/ui/TableFloatingControls/index.js +1 -17
- package/package.json +2 -5
- package/dist/cjs/ui/TableFloatingControls/CornerControls/DragCornerControls.js +0 -118
- package/dist/cjs/ui/TableFloatingControls/CornerControls/types.js +0 -5
- package/dist/es2019/ui/TableFloatingControls/CornerControls/DragCornerControls.js +0 -126
- package/dist/es2019/ui/TableFloatingControls/CornerControls/types.js +0 -1
- package/dist/esm/ui/TableFloatingControls/CornerControls/DragCornerControls.js +0 -109
- package/dist/esm/ui/TableFloatingControls/CornerControls/types.js +0 -1
- package/dist/types/ui/TableFloatingControls/CornerControls/DragCornerControls.d.ts +0 -15
- package/dist/types/ui/TableFloatingControls/CornerControls/types.d.ts +0 -11
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,13 @@
|
|
|
1
1
|
# @atlaskit/editor-plugin-table
|
|
2
2
|
|
|
3
|
+
## 25.0.1
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [`ae5ca1873aef4`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/ae5ca1873aef4) -
|
|
8
|
+
Clean up feature gate `platform_editor_nested_dnd_styles_changes`
|
|
9
|
+
- Updated dependencies
|
|
10
|
+
|
|
3
11
|
## 25.0.0
|
|
4
12
|
|
|
5
13
|
### Major Changes
|
|
@@ -8,12 +8,8 @@ exports.default = exports.TableFloatingControls = void 0;
|
|
|
8
8
|
var _react = require("react");
|
|
9
9
|
var _react2 = require("@emotion/react");
|
|
10
10
|
var _browser = require("@atlaskit/editor-common/browser");
|
|
11
|
-
var _utils = require("@atlaskit/editor-tables/utils");
|
|
12
|
-
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
|
|
13
11
|
var _commands = require("../../pm-plugins/commands");
|
|
14
|
-
var _nodes = require("../../pm-plugins/utils/nodes");
|
|
15
12
|
var _types = require("../../types");
|
|
16
|
-
var _DragCornerControls = require("./CornerControls/DragCornerControls");
|
|
17
13
|
var _NumberColumn = _interopRequireDefault(require("./NumberColumn"));
|
|
18
14
|
var _DragControls = require("./RowControls/DragControls");
|
|
19
15
|
/**
|
|
@@ -25,7 +21,6 @@ var _DragControls = require("./RowControls/DragControls");
|
|
|
25
21
|
|
|
26
22
|
// Row controls
|
|
27
23
|
var TableFloatingControls = exports.TableFloatingControls = function TableFloatingControls(_ref) {
|
|
28
|
-
var _findTable;
|
|
29
24
|
var editorView = _ref.editorView,
|
|
30
25
|
tableRef = _ref.tableRef,
|
|
31
26
|
tableNode = _ref.tableNode,
|
|
@@ -87,11 +82,6 @@ var TableFloatingControls = exports.TableFloatingControls = function TableFloati
|
|
|
87
82
|
}
|
|
88
83
|
var stickyTop = stickyHeader && stickyHeader.sticky && hasHeaderRow ? stickyHeader.top : undefined;
|
|
89
84
|
var wrapperClassName = isDragAndDropEnabled ? isChromelessEditor ? _types.TableCssClassName.DRAG_ROW_CONTROLS_WRAPPER + ' ' + _types.TableCssClassName.TABLE_CHROMELESS : _types.TableCssClassName.DRAG_ROW_CONTROLS_WRAPPER : _types.TableCssClassName.ROW_CONTROLS_WRAPPER;
|
|
90
|
-
var tablePos = (_findTable = (0, _utils.findTable)(editorView.state.selection)) === null || _findTable === void 0 ? void 0 : _findTable.pos;
|
|
91
|
-
// Ignored via go/ees005
|
|
92
|
-
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
|
|
93
|
-
var isNested = tablePos !== undefined && (0, _nodes.isTableNested)(editorView.state, tablePos);
|
|
94
|
-
var shouldShowCornerControls = isNested && !(0, _platformFeatureFlags.fg)('platform_editor_nested_dnd_styles_changes');
|
|
95
85
|
return (0, _react2.jsx)("div", {
|
|
96
86
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
|
|
97
87
|
className: wrapperClassName
|
|
@@ -113,13 +103,7 @@ var TableFloatingControls = exports.TableFloatingControls = function TableFloati
|
|
|
113
103
|
updateCellHoverLocation: updateCellHoverLocation,
|
|
114
104
|
stickyTop: stickyTop,
|
|
115
105
|
isDragAndDropEnabled: isDragAndDropEnabled
|
|
116
|
-
}) : null, tableActive && (0, _react2.jsx)(_react.Fragment, null,
|
|
117
|
-
editorView: editorView,
|
|
118
|
-
tableRef: tableRef,
|
|
119
|
-
isInDanger: isInDanger,
|
|
120
|
-
isResizing: isResizing,
|
|
121
|
-
api: api
|
|
122
|
-
}), (0, _react2.jsx)(_DragControls.DragControlsWithSelection, {
|
|
106
|
+
}) : null, tableActive && (0, _react2.jsx)(_react.Fragment, null, (0, _react2.jsx)(_DragControls.DragControlsWithSelection, {
|
|
123
107
|
tableRef: tableRef,
|
|
124
108
|
tableNode: tableNode,
|
|
125
109
|
hoveredCell: hoveredCell,
|
|
@@ -7,12 +7,8 @@ import { Fragment, useCallback } from 'react';
|
|
|
7
7
|
/* eslint-disable @typescript-eslint/consistent-type-imports, @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766; jsx required at runtime for @jsxRuntime classic */
|
|
8
8
|
import { jsx } from '@emotion/react';
|
|
9
9
|
import { getBrowserInfo } from '@atlaskit/editor-common/browser';
|
|
10
|
-
import { findTable } from '@atlaskit/editor-tables/utils';
|
|
11
|
-
import { fg } from '@atlaskit/platform-feature-flags';
|
|
12
10
|
import { hoverCell, hoverRows, selectRow, selectRows } from '../../pm-plugins/commands';
|
|
13
|
-
import { isTableNested } from '../../pm-plugins/utils/nodes';
|
|
14
11
|
import { TableCssClassName as ClassName } from '../../types';
|
|
15
|
-
import { DragCornerControlsWithSelection } from './CornerControls/DragCornerControls';
|
|
16
12
|
import NumberColumn from './NumberColumn';
|
|
17
13
|
import { DragControlsWithSelection } from './RowControls/DragControls';
|
|
18
14
|
// Row controls
|
|
@@ -34,7 +30,6 @@ export const TableFloatingControls = ({
|
|
|
34
30
|
api,
|
|
35
31
|
isChromelessEditor
|
|
36
32
|
}) => {
|
|
37
|
-
var _findTable;
|
|
38
33
|
const _selectRow = useCallback((row, expand) => {
|
|
39
34
|
const {
|
|
40
35
|
state,
|
|
@@ -88,11 +83,6 @@ export const TableFloatingControls = ({
|
|
|
88
83
|
}
|
|
89
84
|
const stickyTop = stickyHeader && stickyHeader.sticky && hasHeaderRow ? stickyHeader.top : undefined;
|
|
90
85
|
const wrapperClassName = isDragAndDropEnabled ? isChromelessEditor ? ClassName.DRAG_ROW_CONTROLS_WRAPPER + ' ' + ClassName.TABLE_CHROMELESS : ClassName.DRAG_ROW_CONTROLS_WRAPPER : ClassName.ROW_CONTROLS_WRAPPER;
|
|
91
|
-
const tablePos = (_findTable = findTable(editorView.state.selection)) === null || _findTable === void 0 ? void 0 : _findTable.pos;
|
|
92
|
-
// Ignored via go/ees005
|
|
93
|
-
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
|
|
94
|
-
const isNested = tablePos !== undefined && isTableNested(editorView.state, tablePos);
|
|
95
|
-
const shouldShowCornerControls = isNested && !fg('platform_editor_nested_dnd_styles_changes');
|
|
96
86
|
return jsx("div", {
|
|
97
87
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
|
|
98
88
|
className: wrapperClassName
|
|
@@ -112,13 +102,7 @@ export const TableFloatingControls = ({
|
|
|
112
102
|
updateCellHoverLocation: updateCellHoverLocation,
|
|
113
103
|
stickyTop: stickyTop,
|
|
114
104
|
isDragAndDropEnabled: isDragAndDropEnabled
|
|
115
|
-
}) : null, tableActive && jsx(Fragment, null,
|
|
116
|
-
editorView: editorView,
|
|
117
|
-
tableRef: tableRef,
|
|
118
|
-
isInDanger: isInDanger,
|
|
119
|
-
isResizing: isResizing,
|
|
120
|
-
api: api
|
|
121
|
-
}), jsx(DragControlsWithSelection, {
|
|
105
|
+
}) : null, tableActive && jsx(Fragment, null, jsx(DragControlsWithSelection, {
|
|
122
106
|
tableRef: tableRef,
|
|
123
107
|
tableNode: tableNode,
|
|
124
108
|
hoveredCell: hoveredCell,
|
|
@@ -7,17 +7,12 @@ import { Fragment, useCallback } from 'react';
|
|
|
7
7
|
/* eslint-disable @typescript-eslint/consistent-type-imports, @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766; jsx required at runtime for @jsxRuntime classic */
|
|
8
8
|
import { jsx } from '@emotion/react';
|
|
9
9
|
import { getBrowserInfo } from '@atlaskit/editor-common/browser';
|
|
10
|
-
import { findTable } from '@atlaskit/editor-tables/utils';
|
|
11
|
-
import { fg } from '@atlaskit/platform-feature-flags';
|
|
12
10
|
import { hoverCell, hoverRows, selectRow, selectRows } from '../../pm-plugins/commands';
|
|
13
|
-
import { isTableNested } from '../../pm-plugins/utils/nodes';
|
|
14
11
|
import { TableCssClassName as ClassName } from '../../types';
|
|
15
|
-
import { DragCornerControlsWithSelection } from './CornerControls/DragCornerControls';
|
|
16
12
|
import NumberColumn from './NumberColumn';
|
|
17
13
|
import { DragControlsWithSelection } from './RowControls/DragControls';
|
|
18
14
|
// Row controls
|
|
19
15
|
export var TableFloatingControls = function TableFloatingControls(_ref) {
|
|
20
|
-
var _findTable;
|
|
21
16
|
var editorView = _ref.editorView,
|
|
22
17
|
tableRef = _ref.tableRef,
|
|
23
18
|
tableNode = _ref.tableNode,
|
|
@@ -79,11 +74,6 @@ export var TableFloatingControls = function TableFloatingControls(_ref) {
|
|
|
79
74
|
}
|
|
80
75
|
var stickyTop = stickyHeader && stickyHeader.sticky && hasHeaderRow ? stickyHeader.top : undefined;
|
|
81
76
|
var wrapperClassName = isDragAndDropEnabled ? isChromelessEditor ? ClassName.DRAG_ROW_CONTROLS_WRAPPER + ' ' + ClassName.TABLE_CHROMELESS : ClassName.DRAG_ROW_CONTROLS_WRAPPER : ClassName.ROW_CONTROLS_WRAPPER;
|
|
82
|
-
var tablePos = (_findTable = findTable(editorView.state.selection)) === null || _findTable === void 0 ? void 0 : _findTable.pos;
|
|
83
|
-
// Ignored via go/ees005
|
|
84
|
-
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
|
|
85
|
-
var isNested = tablePos !== undefined && isTableNested(editorView.state, tablePos);
|
|
86
|
-
var shouldShowCornerControls = isNested && !fg('platform_editor_nested_dnd_styles_changes');
|
|
87
77
|
return jsx("div", {
|
|
88
78
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
|
|
89
79
|
className: wrapperClassName
|
|
@@ -105,13 +95,7 @@ export var TableFloatingControls = function TableFloatingControls(_ref) {
|
|
|
105
95
|
updateCellHoverLocation: updateCellHoverLocation,
|
|
106
96
|
stickyTop: stickyTop,
|
|
107
97
|
isDragAndDropEnabled: isDragAndDropEnabled
|
|
108
|
-
}) : null, tableActive && jsx(Fragment, null,
|
|
109
|
-
editorView: editorView,
|
|
110
|
-
tableRef: tableRef,
|
|
111
|
-
isInDanger: isInDanger,
|
|
112
|
-
isResizing: isResizing,
|
|
113
|
-
api: api
|
|
114
|
-
}), jsx(DragControlsWithSelection, {
|
|
98
|
+
}) : null, tableActive && jsx(Fragment, null, jsx(DragControlsWithSelection, {
|
|
115
99
|
tableRef: tableRef,
|
|
116
100
|
tableNode: tableNode,
|
|
117
101
|
hoveredCell: hoveredCell,
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/editor-plugin-table",
|
|
3
|
-
"version": "25.0.
|
|
3
|
+
"version": "25.0.1",
|
|
4
4
|
"description": "Table plugin for the @atlaskit/editor",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"registry": "https://registry.npmjs.org/"
|
|
@@ -29,7 +29,7 @@
|
|
|
29
29
|
"@atlaskit/editor-plugin-batch-attribute-updates": "^13.0.0",
|
|
30
30
|
"@atlaskit/editor-plugin-content-insertion": "^13.0.0",
|
|
31
31
|
"@atlaskit/editor-plugin-editor-viewmode": "^15.0.0",
|
|
32
|
-
"@atlaskit/editor-plugin-extension": "16.0.
|
|
32
|
+
"@atlaskit/editor-plugin-extension": "16.0.1",
|
|
33
33
|
"@atlaskit/editor-plugin-guideline": "^13.0.0",
|
|
34
34
|
"@atlaskit/editor-plugin-interaction": "^24.0.0",
|
|
35
35
|
"@atlaskit/editor-plugin-limited-mode": "^10.0.0",
|
|
@@ -107,9 +107,6 @@
|
|
|
107
107
|
"platform_editor_paste_full_table_inside_empty_cell": {
|
|
108
108
|
"type": "boolean"
|
|
109
109
|
},
|
|
110
|
-
"platform_editor_nested_dnd_styles_changes": {
|
|
111
|
-
"type": "boolean"
|
|
112
|
-
},
|
|
113
110
|
"platform_editor_tables_table_selector": {
|
|
114
111
|
"type": "boolean"
|
|
115
112
|
},
|
|
@@ -1,118 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
-
var _typeof = require("@babel/runtime/helpers/typeof");
|
|
5
|
-
Object.defineProperty(exports, "__esModule", {
|
|
6
|
-
value: true
|
|
7
|
-
});
|
|
8
|
-
exports.DragCornerControlsWithSelection = exports.DragCornerControls = void 0;
|
|
9
|
-
var _react = _interopRequireWildcard(require("react"));
|
|
10
|
-
var _classnames = _interopRequireDefault(require("classnames"));
|
|
11
|
-
var _reactIntl = require("react-intl");
|
|
12
|
-
var _hooks = require("@atlaskit/editor-common/hooks");
|
|
13
|
-
var _messages = require("@atlaskit/editor-common/messages");
|
|
14
|
-
var _utils = require("@atlaskit/editor-tables/utils");
|
|
15
|
-
var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
|
|
16
|
-
var _commands = require("../../../pm-plugins/commands");
|
|
17
|
-
var _types = require("../../../types");
|
|
18
|
-
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); }
|
|
19
|
-
var DragCornerControlsComponent = function DragCornerControlsComponent(_ref) {
|
|
20
|
-
var editorView = _ref.editorView,
|
|
21
|
-
isInDanger = _ref.isInDanger,
|
|
22
|
-
isResizing = _ref.isResizing,
|
|
23
|
-
formatMessage = _ref.intl.formatMessage;
|
|
24
|
-
var handleOnClick = function handleOnClick() {
|
|
25
|
-
var state = editorView.state,
|
|
26
|
-
dispatch = editorView.dispatch;
|
|
27
|
-
dispatch((0, _utils.selectTable)(state.tr).setMeta('addToHistory', false));
|
|
28
|
-
};
|
|
29
|
-
var handleMouseOut = function handleMouseOut() {
|
|
30
|
-
var state = editorView.state,
|
|
31
|
-
dispatch = editorView.dispatch;
|
|
32
|
-
(0, _commands.clearHoverSelection)()(state, dispatch);
|
|
33
|
-
};
|
|
34
|
-
var isActive = (0, _react.useMemo)(function () {
|
|
35
|
-
var selection = editorView.state.selection;
|
|
36
|
-
var table = (0, _utils.findTable)(selection);
|
|
37
|
-
if (!table) {
|
|
38
|
-
return false;
|
|
39
|
-
}
|
|
40
|
-
return (0, _utils.isTableSelected)(selection);
|
|
41
|
-
}, [editorView.state]);
|
|
42
|
-
if (isResizing) {
|
|
43
|
-
return null;
|
|
44
|
-
}
|
|
45
|
-
return /*#__PURE__*/_react.default.createElement("button", {
|
|
46
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
|
|
47
|
-
className: (0, _classnames.default)(_types.TableCssClassName.DRAG_CORNER_BUTTON, {
|
|
48
|
-
active: isActive,
|
|
49
|
-
danger: isActive && isInDanger
|
|
50
|
-
}),
|
|
51
|
-
"aria-label": formatMessage(_messages.tableMessages.cornerControl),
|
|
52
|
-
type: "button",
|
|
53
|
-
onClick: handleOnClick,
|
|
54
|
-
onMouseOut: handleMouseOut,
|
|
55
|
-
onBlur: (0, _expValEquals.expValEquals)('platform_editor_table_a11y_eslint_fix', 'isEnabled', true) ? handleMouseOut : undefined,
|
|
56
|
-
contentEditable: false
|
|
57
|
-
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
58
|
-
className: _types.TableCssClassName.DRAG_CORNER_BUTTON_INNER
|
|
59
|
-
}));
|
|
60
|
-
};
|
|
61
|
-
var DragCornerControlsComponentWithSelection = function DragCornerControlsComponentWithSelection(_ref2) {
|
|
62
|
-
var editorView = _ref2.editorView,
|
|
63
|
-
isInDanger = _ref2.isInDanger,
|
|
64
|
-
isResizing = _ref2.isResizing,
|
|
65
|
-
formatMessage = _ref2.intl.formatMessage,
|
|
66
|
-
api = _ref2.api;
|
|
67
|
-
var _useSharedPluginState = (0, _hooks.useSharedPluginStateWithSelector)(api, ['selection'], function (states) {
|
|
68
|
-
var _states$selectionStat;
|
|
69
|
-
return {
|
|
70
|
-
selection: (_states$selectionStat = states.selectionState) === null || _states$selectionStat === void 0 ? void 0 : _states$selectionStat.selection
|
|
71
|
-
};
|
|
72
|
-
}),
|
|
73
|
-
selection = _useSharedPluginState.selection;
|
|
74
|
-
var handleOnClick = function handleOnClick() {
|
|
75
|
-
var state = editorView.state,
|
|
76
|
-
dispatch = editorView.dispatch;
|
|
77
|
-
dispatch((0, _utils.selectTable)(state.tr).setMeta('addToHistory', false));
|
|
78
|
-
};
|
|
79
|
-
var handleMouseOut = function handleMouseOut() {
|
|
80
|
-
var state = editorView.state,
|
|
81
|
-
dispatch = editorView.dispatch;
|
|
82
|
-
(0, _commands.clearHoverSelection)()(state, dispatch);
|
|
83
|
-
};
|
|
84
|
-
var isActive = (0, _react.useMemo)(function () {
|
|
85
|
-
if (!selection) {
|
|
86
|
-
return;
|
|
87
|
-
}
|
|
88
|
-
var table = (0, _utils.findTable)(selection);
|
|
89
|
-
if (!table) {
|
|
90
|
-
return false;
|
|
91
|
-
}
|
|
92
|
-
return (0, _utils.isTableSelected)(selection);
|
|
93
|
-
}, [selection]);
|
|
94
|
-
if (isResizing) {
|
|
95
|
-
return null;
|
|
96
|
-
}
|
|
97
|
-
return /*#__PURE__*/_react.default.createElement("button", {
|
|
98
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
|
|
99
|
-
className: (0, _classnames.default)(_types.TableCssClassName.DRAG_CORNER_BUTTON, {
|
|
100
|
-
active: isActive,
|
|
101
|
-
danger: isActive && isInDanger
|
|
102
|
-
}),
|
|
103
|
-
"aria-label": formatMessage(_messages.tableMessages.cornerControl),
|
|
104
|
-
type: "button",
|
|
105
|
-
onClick: handleOnClick,
|
|
106
|
-
onMouseOut: handleMouseOut,
|
|
107
|
-
onBlur: (0, _expValEquals.expValEquals)('platform_editor_table_a11y_eslint_fix', 'isEnabled', true) ? handleMouseOut : undefined,
|
|
108
|
-
contentEditable: false
|
|
109
|
-
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
110
|
-
className: _types.TableCssClassName.DRAG_CORNER_BUTTON_INNER
|
|
111
|
-
}));
|
|
112
|
-
};
|
|
113
|
-
|
|
114
|
-
// eslint-disable-next-line @typescript-eslint/ban-types
|
|
115
|
-
var DragCornerControlsWithSelection = exports.DragCornerControlsWithSelection = (0, _reactIntl.injectIntl)(DragCornerControlsComponentWithSelection);
|
|
116
|
-
|
|
117
|
-
// eslint-disable-next-line @typescript-eslint/ban-types
|
|
118
|
-
var DragCornerControls = exports.DragCornerControls = (0, _reactIntl.injectIntl)(DragCornerControlsComponent);
|
|
@@ -1,126 +0,0 @@
|
|
|
1
|
-
import React, { useMemo } from 'react';
|
|
2
|
-
import classnames from 'classnames';
|
|
3
|
-
import { injectIntl } from 'react-intl';
|
|
4
|
-
import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
|
|
5
|
-
import { tableMessages as messages } from '@atlaskit/editor-common/messages';
|
|
6
|
-
import { findTable, isTableSelected, selectTable } from '@atlaskit/editor-tables/utils';
|
|
7
|
-
import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
|
|
8
|
-
import { clearHoverSelection } from '../../../pm-plugins/commands';
|
|
9
|
-
import { TableCssClassName as ClassName } from '../../../types';
|
|
10
|
-
const DragCornerControlsComponent = ({
|
|
11
|
-
editorView,
|
|
12
|
-
isInDanger,
|
|
13
|
-
isResizing,
|
|
14
|
-
intl: {
|
|
15
|
-
formatMessage
|
|
16
|
-
}
|
|
17
|
-
}) => {
|
|
18
|
-
const handleOnClick = () => {
|
|
19
|
-
const {
|
|
20
|
-
state,
|
|
21
|
-
dispatch
|
|
22
|
-
} = editorView;
|
|
23
|
-
dispatch(selectTable(state.tr).setMeta('addToHistory', false));
|
|
24
|
-
};
|
|
25
|
-
const handleMouseOut = () => {
|
|
26
|
-
const {
|
|
27
|
-
state,
|
|
28
|
-
dispatch
|
|
29
|
-
} = editorView;
|
|
30
|
-
clearHoverSelection()(state, dispatch);
|
|
31
|
-
};
|
|
32
|
-
const isActive = useMemo(() => {
|
|
33
|
-
const {
|
|
34
|
-
selection
|
|
35
|
-
} = editorView.state;
|
|
36
|
-
const table = findTable(selection);
|
|
37
|
-
if (!table) {
|
|
38
|
-
return false;
|
|
39
|
-
}
|
|
40
|
-
return isTableSelected(selection);
|
|
41
|
-
}, [editorView.state]);
|
|
42
|
-
if (isResizing) {
|
|
43
|
-
return null;
|
|
44
|
-
}
|
|
45
|
-
return /*#__PURE__*/React.createElement("button", {
|
|
46
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
|
|
47
|
-
className: classnames(ClassName.DRAG_CORNER_BUTTON, {
|
|
48
|
-
active: isActive,
|
|
49
|
-
danger: isActive && isInDanger
|
|
50
|
-
}),
|
|
51
|
-
"aria-label": formatMessage(messages.cornerControl),
|
|
52
|
-
type: "button",
|
|
53
|
-
onClick: handleOnClick,
|
|
54
|
-
onMouseOut: handleMouseOut,
|
|
55
|
-
onBlur: expValEquals('platform_editor_table_a11y_eslint_fix', 'isEnabled', true) ? handleMouseOut : undefined,
|
|
56
|
-
contentEditable: false
|
|
57
|
-
}, /*#__PURE__*/React.createElement("div", {
|
|
58
|
-
className: ClassName.DRAG_CORNER_BUTTON_INNER
|
|
59
|
-
}));
|
|
60
|
-
};
|
|
61
|
-
const DragCornerControlsComponentWithSelection = ({
|
|
62
|
-
editorView,
|
|
63
|
-
isInDanger,
|
|
64
|
-
isResizing,
|
|
65
|
-
intl: {
|
|
66
|
-
formatMessage
|
|
67
|
-
},
|
|
68
|
-
api
|
|
69
|
-
}) => {
|
|
70
|
-
const {
|
|
71
|
-
selection
|
|
72
|
-
} = useSharedPluginStateWithSelector(api, ['selection'], states => {
|
|
73
|
-
var _states$selectionStat;
|
|
74
|
-
return {
|
|
75
|
-
selection: (_states$selectionStat = states.selectionState) === null || _states$selectionStat === void 0 ? void 0 : _states$selectionStat.selection
|
|
76
|
-
};
|
|
77
|
-
});
|
|
78
|
-
const handleOnClick = () => {
|
|
79
|
-
const {
|
|
80
|
-
state,
|
|
81
|
-
dispatch
|
|
82
|
-
} = editorView;
|
|
83
|
-
dispatch(selectTable(state.tr).setMeta('addToHistory', false));
|
|
84
|
-
};
|
|
85
|
-
const handleMouseOut = () => {
|
|
86
|
-
const {
|
|
87
|
-
state,
|
|
88
|
-
dispatch
|
|
89
|
-
} = editorView;
|
|
90
|
-
clearHoverSelection()(state, dispatch);
|
|
91
|
-
};
|
|
92
|
-
const isActive = useMemo(() => {
|
|
93
|
-
if (!selection) {
|
|
94
|
-
return;
|
|
95
|
-
}
|
|
96
|
-
const table = findTable(selection);
|
|
97
|
-
if (!table) {
|
|
98
|
-
return false;
|
|
99
|
-
}
|
|
100
|
-
return isTableSelected(selection);
|
|
101
|
-
}, [selection]);
|
|
102
|
-
if (isResizing) {
|
|
103
|
-
return null;
|
|
104
|
-
}
|
|
105
|
-
return /*#__PURE__*/React.createElement("button", {
|
|
106
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
|
|
107
|
-
className: classnames(ClassName.DRAG_CORNER_BUTTON, {
|
|
108
|
-
active: isActive,
|
|
109
|
-
danger: isActive && isInDanger
|
|
110
|
-
}),
|
|
111
|
-
"aria-label": formatMessage(messages.cornerControl),
|
|
112
|
-
type: "button",
|
|
113
|
-
onClick: handleOnClick,
|
|
114
|
-
onMouseOut: handleMouseOut,
|
|
115
|
-
onBlur: expValEquals('platform_editor_table_a11y_eslint_fix', 'isEnabled', true) ? handleMouseOut : undefined,
|
|
116
|
-
contentEditable: false
|
|
117
|
-
}, /*#__PURE__*/React.createElement("div", {
|
|
118
|
-
className: ClassName.DRAG_CORNER_BUTTON_INNER
|
|
119
|
-
}));
|
|
120
|
-
};
|
|
121
|
-
|
|
122
|
-
// eslint-disable-next-line @typescript-eslint/ban-types
|
|
123
|
-
export const DragCornerControlsWithSelection = injectIntl(DragCornerControlsComponentWithSelection);
|
|
124
|
-
|
|
125
|
-
// eslint-disable-next-line @typescript-eslint/ban-types
|
|
126
|
-
export const DragCornerControls = injectIntl(DragCornerControlsComponent);
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export {};
|
|
@@ -1,109 +0,0 @@
|
|
|
1
|
-
import React, { useMemo } from 'react';
|
|
2
|
-
import classnames from 'classnames';
|
|
3
|
-
import { injectIntl } from 'react-intl';
|
|
4
|
-
import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
|
|
5
|
-
import { tableMessages as messages } from '@atlaskit/editor-common/messages';
|
|
6
|
-
import { findTable, isTableSelected, selectTable } from '@atlaskit/editor-tables/utils';
|
|
7
|
-
import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
|
|
8
|
-
import { clearHoverSelection } from '../../../pm-plugins/commands';
|
|
9
|
-
import { TableCssClassName as ClassName } from '../../../types';
|
|
10
|
-
var DragCornerControlsComponent = function DragCornerControlsComponent(_ref) {
|
|
11
|
-
var editorView = _ref.editorView,
|
|
12
|
-
isInDanger = _ref.isInDanger,
|
|
13
|
-
isResizing = _ref.isResizing,
|
|
14
|
-
formatMessage = _ref.intl.formatMessage;
|
|
15
|
-
var handleOnClick = function handleOnClick() {
|
|
16
|
-
var state = editorView.state,
|
|
17
|
-
dispatch = editorView.dispatch;
|
|
18
|
-
dispatch(selectTable(state.tr).setMeta('addToHistory', false));
|
|
19
|
-
};
|
|
20
|
-
var handleMouseOut = function handleMouseOut() {
|
|
21
|
-
var state = editorView.state,
|
|
22
|
-
dispatch = editorView.dispatch;
|
|
23
|
-
clearHoverSelection()(state, dispatch);
|
|
24
|
-
};
|
|
25
|
-
var isActive = useMemo(function () {
|
|
26
|
-
var selection = editorView.state.selection;
|
|
27
|
-
var table = findTable(selection);
|
|
28
|
-
if (!table) {
|
|
29
|
-
return false;
|
|
30
|
-
}
|
|
31
|
-
return isTableSelected(selection);
|
|
32
|
-
}, [editorView.state]);
|
|
33
|
-
if (isResizing) {
|
|
34
|
-
return null;
|
|
35
|
-
}
|
|
36
|
-
return /*#__PURE__*/React.createElement("button", {
|
|
37
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
|
|
38
|
-
className: classnames(ClassName.DRAG_CORNER_BUTTON, {
|
|
39
|
-
active: isActive,
|
|
40
|
-
danger: isActive && isInDanger
|
|
41
|
-
}),
|
|
42
|
-
"aria-label": formatMessage(messages.cornerControl),
|
|
43
|
-
type: "button",
|
|
44
|
-
onClick: handleOnClick,
|
|
45
|
-
onMouseOut: handleMouseOut,
|
|
46
|
-
onBlur: expValEquals('platform_editor_table_a11y_eslint_fix', 'isEnabled', true) ? handleMouseOut : undefined,
|
|
47
|
-
contentEditable: false
|
|
48
|
-
}, /*#__PURE__*/React.createElement("div", {
|
|
49
|
-
className: ClassName.DRAG_CORNER_BUTTON_INNER
|
|
50
|
-
}));
|
|
51
|
-
};
|
|
52
|
-
var DragCornerControlsComponentWithSelection = function DragCornerControlsComponentWithSelection(_ref2) {
|
|
53
|
-
var editorView = _ref2.editorView,
|
|
54
|
-
isInDanger = _ref2.isInDanger,
|
|
55
|
-
isResizing = _ref2.isResizing,
|
|
56
|
-
formatMessage = _ref2.intl.formatMessage,
|
|
57
|
-
api = _ref2.api;
|
|
58
|
-
var _useSharedPluginState = useSharedPluginStateWithSelector(api, ['selection'], function (states) {
|
|
59
|
-
var _states$selectionStat;
|
|
60
|
-
return {
|
|
61
|
-
selection: (_states$selectionStat = states.selectionState) === null || _states$selectionStat === void 0 ? void 0 : _states$selectionStat.selection
|
|
62
|
-
};
|
|
63
|
-
}),
|
|
64
|
-
selection = _useSharedPluginState.selection;
|
|
65
|
-
var handleOnClick = function handleOnClick() {
|
|
66
|
-
var state = editorView.state,
|
|
67
|
-
dispatch = editorView.dispatch;
|
|
68
|
-
dispatch(selectTable(state.tr).setMeta('addToHistory', false));
|
|
69
|
-
};
|
|
70
|
-
var handleMouseOut = function handleMouseOut() {
|
|
71
|
-
var state = editorView.state,
|
|
72
|
-
dispatch = editorView.dispatch;
|
|
73
|
-
clearHoverSelection()(state, dispatch);
|
|
74
|
-
};
|
|
75
|
-
var isActive = useMemo(function () {
|
|
76
|
-
if (!selection) {
|
|
77
|
-
return;
|
|
78
|
-
}
|
|
79
|
-
var table = findTable(selection);
|
|
80
|
-
if (!table) {
|
|
81
|
-
return false;
|
|
82
|
-
}
|
|
83
|
-
return isTableSelected(selection);
|
|
84
|
-
}, [selection]);
|
|
85
|
-
if (isResizing) {
|
|
86
|
-
return null;
|
|
87
|
-
}
|
|
88
|
-
return /*#__PURE__*/React.createElement("button", {
|
|
89
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
|
|
90
|
-
className: classnames(ClassName.DRAG_CORNER_BUTTON, {
|
|
91
|
-
active: isActive,
|
|
92
|
-
danger: isActive && isInDanger
|
|
93
|
-
}),
|
|
94
|
-
"aria-label": formatMessage(messages.cornerControl),
|
|
95
|
-
type: "button",
|
|
96
|
-
onClick: handleOnClick,
|
|
97
|
-
onMouseOut: handleMouseOut,
|
|
98
|
-
onBlur: expValEquals('platform_editor_table_a11y_eslint_fix', 'isEnabled', true) ? handleMouseOut : undefined,
|
|
99
|
-
contentEditable: false
|
|
100
|
-
}, /*#__PURE__*/React.createElement("div", {
|
|
101
|
-
className: ClassName.DRAG_CORNER_BUTTON_INNER
|
|
102
|
-
}));
|
|
103
|
-
};
|
|
104
|
-
|
|
105
|
-
// eslint-disable-next-line @typescript-eslint/ban-types
|
|
106
|
-
export var DragCornerControlsWithSelection = injectIntl(DragCornerControlsComponentWithSelection);
|
|
107
|
-
|
|
108
|
-
// eslint-disable-next-line @typescript-eslint/ban-types
|
|
109
|
-
export var DragCornerControls = injectIntl(DragCornerControlsComponent);
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export {};
|
|
@@ -1,15 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import type { WithIntlProps, WrappedComponentProps } from 'react-intl';
|
|
3
|
-
import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
|
|
4
|
-
import type { TablePlugin } from '../../../tablePluginType';
|
|
5
|
-
import type { CornerControlProps } from './types';
|
|
6
|
-
export declare const DragCornerControlsWithSelection: React.FC<WithIntlProps<CornerControlProps & WrappedComponentProps & {
|
|
7
|
-
api?: ExtractInjectionAPI<TablePlugin>;
|
|
8
|
-
}>> & {
|
|
9
|
-
WrappedComponent: React.ComponentType<CornerControlProps & WrappedComponentProps & {
|
|
10
|
-
api?: ExtractInjectionAPI<TablePlugin>;
|
|
11
|
-
}>;
|
|
12
|
-
};
|
|
13
|
-
export declare const DragCornerControls: React.FC<WithIntlProps<CornerControlProps & WrappedComponentProps>> & {
|
|
14
|
-
WrappedComponent: React.ComponentType<CornerControlProps & WrappedComponentProps>;
|
|
15
|
-
};
|
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
import type { EditorView } from '@atlaskit/editor-prosemirror/view';
|
|
2
|
-
export type CornerControlProps = {
|
|
3
|
-
editorView: EditorView;
|
|
4
|
-
hoveredRows?: number[];
|
|
5
|
-
isHeaderColumnEnabled?: boolean;
|
|
6
|
-
isHeaderRowEnabled?: boolean;
|
|
7
|
-
isInDanger?: boolean;
|
|
8
|
-
isResizing?: boolean;
|
|
9
|
-
stickyTop?: number;
|
|
10
|
-
tableRef?: HTMLTableElement;
|
|
11
|
-
};
|