@atlaskit/editor-plugin-table 2.1.3 → 2.1.5
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 +13 -0
- package/dist/cjs/plugins/table/commands/hover.js +1 -1
- package/dist/cjs/plugins/table/commands/sort.js +12 -14
- package/dist/cjs/plugins/table/index.js +28 -30
- package/dist/cjs/plugins/table/nodeviews/TableComponent.js +2 -2
- package/dist/cjs/plugins/table/nodeviews/update-overflow-shadows.js +1 -1
- package/dist/cjs/plugins/table/pm-plugins/main.js +1 -1
- package/dist/cjs/plugins/table/pm-plugins/table-add-width.js +2 -2
- package/dist/cjs/plugins/table/pm-plugins/table-local-id.js +1 -1
- package/dist/cjs/plugins/table/pm-plugins/table-resizing/plugin.js +1 -1
- package/dist/cjs/plugins/table/pm-plugins/table-resizing/utils/dom.js +3 -3
- package/dist/cjs/plugins/table/toolbar.js +2 -2
- package/dist/cjs/plugins/table/transforms/column-width.js +1 -1
- package/dist/cjs/plugins/table/ui/LayoutButton/index.js +1 -1
- package/dist/cjs/plugins/table/ui/common-styles.js +1 -1
- package/dist/cjs/plugins/table/ui/ui-styles.js +1 -1
- package/dist/cjs/plugins/table/utils/column-controls.js +2 -2
- package/dist/cjs/plugins/table/utils/decoration.js +1 -1
- package/dist/cjs/version.json +1 -1
- package/dist/es2019/plugins/table/commands/hover.js +1 -1
- package/dist/es2019/plugins/table/commands/sort.js +14 -16
- package/dist/es2019/plugins/table/index.js +1 -4
- package/dist/es2019/plugins/table/nodeviews/TableComponent.js +2 -2
- package/dist/es2019/plugins/table/nodeviews/update-overflow-shadows.js +1 -1
- package/dist/es2019/plugins/table/pm-plugins/main.js +1 -1
- package/dist/es2019/plugins/table/pm-plugins/table-add-width.js +2 -3
- package/dist/es2019/plugins/table/pm-plugins/table-local-id.js +1 -1
- package/dist/es2019/plugins/table/pm-plugins/table-resizing/plugin.js +1 -1
- package/dist/es2019/plugins/table/pm-plugins/table-resizing/utils/dom.js +3 -3
- package/dist/es2019/plugins/table/toolbar.js +2 -2
- package/dist/es2019/plugins/table/transforms/column-width.js +1 -1
- package/dist/es2019/plugins/table/ui/LayoutButton/index.js +1 -1
- package/dist/es2019/plugins/table/ui/common-styles.js +1 -1
- package/dist/es2019/plugins/table/ui/ui-styles.js +1 -1
- package/dist/es2019/plugins/table/utils/column-controls.js +2 -2
- package/dist/es2019/plugins/table/utils/decoration.js +1 -1
- package/dist/es2019/version.json +1 -1
- package/dist/esm/plugins/table/commands/hover.js +1 -1
- package/dist/esm/plugins/table/commands/sort.js +12 -14
- package/dist/esm/plugins/table/index.js +28 -30
- package/dist/esm/plugins/table/nodeviews/TableComponent.js +2 -2
- package/dist/esm/plugins/table/nodeviews/update-overflow-shadows.js +1 -1
- package/dist/esm/plugins/table/pm-plugins/main.js +1 -1
- package/dist/esm/plugins/table/pm-plugins/table-add-width.js +2 -3
- package/dist/esm/plugins/table/pm-plugins/table-local-id.js +1 -1
- package/dist/esm/plugins/table/pm-plugins/table-resizing/plugin.js +1 -1
- package/dist/esm/plugins/table/pm-plugins/table-resizing/utils/dom.js +3 -3
- package/dist/esm/plugins/table/toolbar.js +2 -2
- package/dist/esm/plugins/table/transforms/column-width.js +1 -1
- package/dist/esm/plugins/table/ui/LayoutButton/index.js +1 -1
- package/dist/esm/plugins/table/ui/common-styles.js +1 -1
- package/dist/esm/plugins/table/ui/ui-styles.js +1 -1
- package/dist/esm/plugins/table/utils/column-controls.js +2 -2
- package/dist/esm/plugins/table/utils/decoration.js +1 -1
- package/dist/esm/version.json +1 -1
- package/dist/types/plugins/table/nodeviews/TableComponent.d.ts +1 -1
- package/dist/types/plugins/table/nodeviews/update-overflow-shadows.d.ts +1 -2
- package/dist/types/plugins/table/pm-plugins/table-add-width.d.ts +1 -2
- package/dist/types/plugins/table/pm-plugins/table-resizing/utils/dom.d.ts +1 -1
- package/dist/types/plugins/table/ui/ui-styles.d.ts +1 -1
- package/dist/types/plugins/table/utils/column-controls.d.ts +1 -1
- package/dist/types/plugins/table/utils/decoration.d.ts +1 -1
- package/dist/types-ts4.5/plugins/table/nodeviews/TableComponent.d.ts +1 -1
- package/dist/types-ts4.5/plugins/table/nodeviews/update-overflow-shadows.d.ts +1 -2
- package/dist/types-ts4.5/plugins/table/pm-plugins/table-add-width.d.ts +1 -2
- package/dist/types-ts4.5/plugins/table/pm-plugins/table-resizing/utils/dom.d.ts +1 -1
- package/dist/types-ts4.5/plugins/table/ui/ui-styles.d.ts +1 -1
- package/dist/types-ts4.5/plugins/table/utils/column-controls.d.ts +1 -1
- package/dist/types-ts4.5/plugins/table/utils/decoration.d.ts +1 -1
- package/package.json +4 -4
- package/src/__tests__/unit/utils/column-controls.ts +4 -4
- package/src/plugins/table/commands/hover.ts +1 -1
- package/src/plugins/table/commands/sort.ts +13 -13
- package/src/plugins/table/index.tsx +3 -8
- package/src/plugins/table/nodeviews/TableComponent.tsx +1 -2
- package/src/plugins/table/nodeviews/update-overflow-shadows.ts +0 -2
- package/src/plugins/table/pm-plugins/main.ts +1 -1
- package/src/plugins/table/pm-plugins/table-add-width.ts +2 -3
- package/src/plugins/table/pm-plugins/table-local-id.ts +1 -1
- package/src/plugins/table/pm-plugins/table-resizing/plugin.ts +1 -1
- package/src/plugins/table/pm-plugins/table-resizing/utils/dom.ts +1 -3
- package/src/plugins/table/toolbar.tsx +0 -2
- package/src/plugins/table/transforms/column-width.ts +1 -1
- package/src/plugins/table/transforms/delete-columns.ts +1 -1
- package/src/plugins/table/ui/LayoutButton/index.tsx +1 -1
- package/src/plugins/table/ui/common-styles.ts +1 -1
- package/src/plugins/table/ui/ui-styles.ts +1 -1
- package/src/plugins/table/utils/column-controls.ts +2 -5
- package/src/plugins/table/utils/decoration.ts +1 -4
- package/src/plugins/table/utils/row-controls.ts +1 -1
- package/tmp/api-report-tmp.d.ts +0 -104
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,18 @@
|
|
|
1
1
|
# @atlaskit/editor-plugin-table
|
|
2
2
|
|
|
3
|
+
## 2.1.5
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [`c133c710360`](https://bitbucket.org/atlassian/atlassian-frontend/commits/c133c710360) - Fix typing errors
|
|
8
|
+
|
|
9
|
+
## 2.1.4
|
|
10
|
+
|
|
11
|
+
### Patch Changes
|
|
12
|
+
|
|
13
|
+
- [`8b891bf3590`](https://bitbucket.org/atlassian/atlassian-frontend/commits/8b891bf3590) - This change introduces `editor-plugin-hyperlink` which separates the hyperlink plugin from `editor-core`. In order to enable this change there are now new entry points on `editor-common` (such as `/link`, `/quick-insert`) in order to separate common code. Further `prosemirror-input-rules` now has new exports of `createPlugin` and `createRule` which are used in many plugins in `editor-core`.
|
|
14
|
+
- Updated dependencies
|
|
15
|
+
|
|
3
16
|
## 2.1.3
|
|
4
17
|
|
|
5
18
|
### Patch Changes
|
|
@@ -36,7 +36,7 @@ var hoverMergedCells = function hoverMergedCells() {
|
|
|
36
36
|
node: table.node.nodeAt(pos)
|
|
37
37
|
};
|
|
38
38
|
});
|
|
39
|
-
var decorations = (0, _utils2.createCellHoverDecoration)(mergedCells
|
|
39
|
+
var decorations = (0, _utils2.createCellHoverDecoration)(mergedCells);
|
|
40
40
|
return {
|
|
41
41
|
type: 'HOVER_CELLS',
|
|
42
42
|
data: {
|
|
@@ -10,21 +10,19 @@ var _utils = require("@atlaskit/editor-tables/utils");
|
|
|
10
10
|
var _utils2 = require("@atlaskit/editor-common/utils");
|
|
11
11
|
var _pluginFactory = require("../pm-plugins/plugin-factory");
|
|
12
12
|
var _steps = require("@atlaskit/adf-schema/steps");
|
|
13
|
-
function createGetInlineCardTextFromStore(
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
};
|
|
24
|
-
}
|
|
13
|
+
var createGetInlineCardTextFromStore = function createGetInlineCardTextFromStore(attrs) {
|
|
14
|
+
var _ref = attrs,
|
|
15
|
+
data = _ref.data;
|
|
16
|
+
if (data && (data.name || data.title)) {
|
|
17
|
+
return data.name || data.title;
|
|
18
|
+
}
|
|
19
|
+
var _ref2 = attrs,
|
|
20
|
+
cardUrl = _ref2.url;
|
|
21
|
+
return cardUrl;
|
|
22
|
+
};
|
|
25
23
|
var sortByColumn = function sortByColumn(columnIndex) {
|
|
26
24
|
var order = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : _steps.TableSortOrder.DESC;
|
|
27
|
-
return (0, _pluginFactory.createCommand)(function (
|
|
25
|
+
return (0, _pluginFactory.createCommand)(function () {
|
|
28
26
|
return {
|
|
29
27
|
type: 'SORT_TABLE',
|
|
30
28
|
data: {
|
|
@@ -50,7 +48,7 @@ var sortByColumn = function sortByColumn(columnIndex) {
|
|
|
50
48
|
headerRow = tableArray.shift();
|
|
51
49
|
}
|
|
52
50
|
var compareNodesInOrder = (0, _utils2.createCompareNodes)({
|
|
53
|
-
getInlineCardTextFromStore: createGetInlineCardTextFromStore
|
|
51
|
+
getInlineCardTextFromStore: createGetInlineCardTextFromStore
|
|
54
52
|
}, order);
|
|
55
53
|
var sortedTable = tableArray.sort(function (rowA, rowB) {
|
|
56
54
|
return compareNodesInOrder(rowA[columnIndex], rowB[columnIndex]);
|
|
@@ -142,8 +142,7 @@ var tablesPlugin = function tablesPlugin(options, api) {
|
|
|
142
142
|
plugin: function plugin() {
|
|
143
143
|
return (0, _pmPlugins.tableEditing)({
|
|
144
144
|
reportFixedTable: function reportFixedTable(_ref5) {
|
|
145
|
-
var
|
|
146
|
-
tr = _ref5.tr,
|
|
145
|
+
var tr = _ref5.tr,
|
|
147
146
|
reason = _ref5.reason;
|
|
148
147
|
editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 ? void 0 : editorAnalyticsAPI.attachAnalyticsEvent({
|
|
149
148
|
action: _analytics.TABLE_ACTION.FIXED,
|
|
@@ -174,9 +173,8 @@ var tablesPlugin = function tablesPlugin(options, api) {
|
|
|
174
173
|
}
|
|
175
174
|
}, {
|
|
176
175
|
name: 'tableAddWidth',
|
|
177
|
-
plugin: function plugin(
|
|
178
|
-
|
|
179
|
-
return (0, _platformFeatureFlags.getBooleanFF)('platform.editor.custom-table-width') && options ? (0, _tableAddWidth.createPlugin)(dispatch, options.fullWidthEnabled || false) : undefined;
|
|
176
|
+
plugin: function plugin() {
|
|
177
|
+
return (0, _platformFeatureFlags.getBooleanFF)('platform.editor.custom-table-width') && options ? (0, _tableAddWidth.createPlugin)(options.fullWidthEnabled || false) : undefined;
|
|
180
178
|
}
|
|
181
179
|
}, {
|
|
182
180
|
name: 'tableGetEditorViewReferencePlugin',
|
|
@@ -206,12 +204,12 @@ var tablesPlugin = function tablesPlugin(options, api) {
|
|
|
206
204
|
}
|
|
207
205
|
return plugins;
|
|
208
206
|
},
|
|
209
|
-
contentComponent: function contentComponent(
|
|
210
|
-
var editorView =
|
|
211
|
-
popupsMountPoint =
|
|
212
|
-
popupsBoundariesElement =
|
|
213
|
-
popupsScrollableElement =
|
|
214
|
-
dispatchAnalyticsEvent =
|
|
207
|
+
contentComponent: function contentComponent(_ref8) {
|
|
208
|
+
var editorView = _ref8.editorView,
|
|
209
|
+
popupsMountPoint = _ref8.popupsMountPoint,
|
|
210
|
+
popupsBoundariesElement = _ref8.popupsBoundariesElement,
|
|
211
|
+
popupsScrollableElement = _ref8.popupsScrollableElement,
|
|
212
|
+
dispatchAnalyticsEvent = _ref8.dispatchAnalyticsEvent;
|
|
215
213
|
return /*#__PURE__*/_react.default.createElement(_errorBoundary.ErrorBoundary, {
|
|
216
214
|
component: _analytics.ACTION_SUBJECT.TABLES_PLUGIN,
|
|
217
215
|
dispatchAnalyticsEvent: dispatchAnalyticsEvent,
|
|
@@ -222,25 +220,25 @@ var tablesPlugin = function tablesPlugin(options, api) {
|
|
|
222
220
|
tableResizingPluginState: _tableResizing.pluginKey,
|
|
223
221
|
stickyHeadersState: _stickyHeaders.pluginKey
|
|
224
222
|
},
|
|
225
|
-
render: function render(
|
|
226
|
-
var resizingPluginState =
|
|
227
|
-
stickyHeadersState =
|
|
228
|
-
tablePluginState =
|
|
223
|
+
render: function render(_ref9) {
|
|
224
|
+
var resizingPluginState = _ref9.tableResizingPluginState,
|
|
225
|
+
stickyHeadersState = _ref9.stickyHeadersState,
|
|
226
|
+
tablePluginState = _ref9.tablePluginState;
|
|
229
227
|
var state = editorView.state;
|
|
230
228
|
var isDragging = resizingPluginState === null || resizingPluginState === void 0 ? void 0 : resizingPluginState.dragging;
|
|
231
|
-
var
|
|
232
|
-
tableNode =
|
|
233
|
-
tablePos =
|
|
234
|
-
targetCellPosition =
|
|
235
|
-
isContextualMenuOpen =
|
|
236
|
-
layout =
|
|
237
|
-
tableRef =
|
|
238
|
-
pluginConfig =
|
|
239
|
-
insertColumnButtonIndex =
|
|
240
|
-
insertRowButtonIndex =
|
|
241
|
-
isHeaderColumnEnabled =
|
|
242
|
-
isHeaderRowEnabled =
|
|
243
|
-
tableWrapperTarget =
|
|
229
|
+
var _ref10 = tablePluginState,
|
|
230
|
+
tableNode = _ref10.tableNode,
|
|
231
|
+
tablePos = _ref10.tablePos,
|
|
232
|
+
targetCellPosition = _ref10.targetCellPosition,
|
|
233
|
+
isContextualMenuOpen = _ref10.isContextualMenuOpen,
|
|
234
|
+
layout = _ref10.layout,
|
|
235
|
+
tableRef = _ref10.tableRef,
|
|
236
|
+
pluginConfig = _ref10.pluginConfig,
|
|
237
|
+
insertColumnButtonIndex = _ref10.insertColumnButtonIndex,
|
|
238
|
+
insertRowButtonIndex = _ref10.insertRowButtonIndex,
|
|
239
|
+
isHeaderColumnEnabled = _ref10.isHeaderColumnEnabled,
|
|
240
|
+
isHeaderRowEnabled = _ref10.isHeaderRowEnabled,
|
|
241
|
+
tableWrapperTarget = _ref10.tableWrapperTarget;
|
|
244
242
|
var allowControls = pluginConfig.allowControls;
|
|
245
243
|
var stickyHeader = stickyHeadersState ? (0, _stickyHeaders.findStickyHeaderForTable)(stickyHeadersState, tablePos) : undefined;
|
|
246
244
|
var LayoutContent = (0, _platformFeatureFlags.getBooleanFF)('platform.editor.custom-table-width') ? null : (0, _utils3.isLayoutSupported)(state) && options && options.breakoutEnabled ? /*#__PURE__*/_react.default.createElement(_LayoutButton.default, {
|
|
@@ -306,8 +304,8 @@ var tablesPlugin = function tablesPlugin(options, api) {
|
|
|
306
304
|
}));
|
|
307
305
|
},
|
|
308
306
|
pluginsOptions: {
|
|
309
|
-
quickInsert: function quickInsert(
|
|
310
|
-
var formatMessage =
|
|
307
|
+
quickInsert: function quickInsert(_ref11) {
|
|
308
|
+
var formatMessage = _ref11.formatMessage;
|
|
311
309
|
return [{
|
|
312
310
|
id: 'table',
|
|
313
311
|
title: formatMessage(_messages.toolbarInsertBlockMessages.table),
|
|
@@ -320,7 +320,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
|
|
|
320
320
|
}
|
|
321
321
|
}, {
|
|
322
322
|
key: "componentDidUpdate",
|
|
323
|
-
value: function componentDidUpdate(
|
|
323
|
+
value: function componentDidUpdate() {
|
|
324
324
|
var _this$props7 = this.props,
|
|
325
325
|
view = _this$props7.view,
|
|
326
326
|
getNode = _this$props7.getNode,
|
|
@@ -373,7 +373,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
|
|
|
373
373
|
if (this.wrapper && parent) {
|
|
374
374
|
var rightShadows = parent.querySelectorAll(".".concat(_types.TableCssClassName.TABLE_RIGHT_SHADOW));
|
|
375
375
|
var leftShadows = parent.querySelectorAll(".".concat(_types.TableCssClassName.TABLE_LEFT_SHADOW));
|
|
376
|
-
(0, _updateOverflowShadows.updateOverflowShadows)(this.props.getEditorFeatureFlags)(this.
|
|
376
|
+
(0, _updateOverflowShadows.updateOverflowShadows)(this.props.getEditorFeatureFlags)(this.wrapper, this.table, rightShadows, leftShadows);
|
|
377
377
|
}
|
|
378
378
|
}
|
|
379
379
|
}, {
|
|
@@ -21,7 +21,7 @@ var updateShadowListForStickyStyles = function updateShadowListForStickyStyles(h
|
|
|
21
21
|
*/
|
|
22
22
|
exports.updateShadowListForStickyStyles = updateShadowListForStickyStyles;
|
|
23
23
|
var updateOverflowShadows = function updateOverflowShadows(getEditorFeatureFlags) {
|
|
24
|
-
return function (
|
|
24
|
+
return function (wrapper, table, rightShadows, leftShadows) {
|
|
25
25
|
var _getEditorFeatureFlag;
|
|
26
26
|
if (((_getEditorFeatureFlag = getEditorFeatureFlags()) === null || _getEditorFeatureFlag === void 0 ? void 0 : _getEditorFeatureFlag.tableOverflowShadowsOptimization) === true) {
|
|
27
27
|
return false;
|
|
@@ -220,7 +220,7 @@ var createPlugin = function createPlugin(dispatchAnalyticsEvent, dispatch, porta
|
|
|
220
220
|
var maybeTr = (0, _utils2.closestElement)(domRef, 'tr');
|
|
221
221
|
return maybeTr ? maybeTr.classList.contains('sticky') : false;
|
|
222
222
|
},
|
|
223
|
-
handleTextInput: function handleTextInput(_ref3,
|
|
223
|
+
handleTextInput: function handleTextInput(_ref3, _from, _to, text) {
|
|
224
224
|
var state = _ref3.state,
|
|
225
225
|
dispatch = _ref3.dispatch;
|
|
226
226
|
var tr = (0, _transforms.replaceSelectedTable)(state, text, _analytics.INPUT_METHOD.KEYBOARD, editorAnalyticsAPI);
|
|
@@ -18,7 +18,7 @@ var _excluded = ["width"];
|
|
|
18
18
|
*/
|
|
19
19
|
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
20
20
|
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
21
|
-
var createPlugin = function createPlugin(
|
|
21
|
+
var createPlugin = function createPlugin(fullWidthEnabled) {
|
|
22
22
|
return new _safePlugin.SafePlugin({
|
|
23
23
|
appendTransaction: function appendTransaction(transactions, _oldState, newState) {
|
|
24
24
|
// When document first load in Confluence, initially it is an empty document
|
|
@@ -47,7 +47,7 @@ var createPlugin = function createPlugin(dispatch, fullWidthEnabled) {
|
|
|
47
47
|
}
|
|
48
48
|
var tr = newState.tr;
|
|
49
49
|
var table = newState.schema.nodes.table;
|
|
50
|
-
newState.doc.forEach(function (node, offset
|
|
50
|
+
newState.doc.forEach(function (node, offset) {
|
|
51
51
|
if (node.type === table) {
|
|
52
52
|
var width = node.attrs.width;
|
|
53
53
|
var layout = node.attrs.layout;
|
|
@@ -148,7 +148,7 @@ var createPlugin = function createPlugin(dispatch) {
|
|
|
148
148
|
if (!(0, _utils.stepHasSlice)(step)) {
|
|
149
149
|
continue;
|
|
150
150
|
}
|
|
151
|
-
step.slice.content.descendants(function (node
|
|
151
|
+
step.slice.content.descendants(function (node) {
|
|
152
152
|
if (node.type === table) {
|
|
153
153
|
addedTableNodes.add(node);
|
|
154
154
|
}
|
|
@@ -38,7 +38,7 @@ function createPlugin(dispatch, _ref, getEditorContainerWidth, getEditorFeatureF
|
|
|
38
38
|
var state = view.state;
|
|
39
39
|
var resizeHandlePos =
|
|
40
40
|
// we're setting `resizeHandlePos` via command in unit tests
|
|
41
|
-
(0, _pluginFactory.getPluginState)(state).resizeHandlePos || (0, _utils.getResizeCellPos)(view, event
|
|
41
|
+
(0, _pluginFactory.getPluginState)(state).resizeHandlePos || (0, _utils.getResizeCellPos)(view, event);
|
|
42
42
|
var _getPluginState = (0, _pluginFactory.getPluginState)(state),
|
|
43
43
|
dragging = _getPluginState.dragging;
|
|
44
44
|
if (resizeHandlePos !== null && !dragging) {
|
|
@@ -43,7 +43,7 @@ var updateControls = function updateControls(getEditorFeatureFlags) {
|
|
|
43
43
|
}
|
|
44
44
|
var rightShadows = wrapper.parentElement.querySelectorAll(".".concat(_types.TableCssClassName.TABLE_RIGHT_SHADOW));
|
|
45
45
|
var leftShadows = wrapper.parentElement.querySelectorAll(".".concat(_types.TableCssClassName.TABLE_LEFT_SHADOW));
|
|
46
|
-
(0, _updateOverflowShadows.updateOverflowShadows)(getEditorFeatureFlags)(
|
|
46
|
+
(0, _updateOverflowShadows.updateOverflowShadows)(getEditorFeatureFlags)(wrapper, tableRef, rightShadows, leftShadows);
|
|
47
47
|
};
|
|
48
48
|
};
|
|
49
49
|
exports.updateControls = updateControls;
|
|
@@ -53,7 +53,7 @@ var isClickNear = function isClickNear(event, click) {
|
|
|
53
53
|
return dx * dx + dy * dy < 100;
|
|
54
54
|
};
|
|
55
55
|
exports.isClickNear = isClickNear;
|
|
56
|
-
var getResizeCellPos = function getResizeCellPos(view, event
|
|
56
|
+
var getResizeCellPos = function getResizeCellPos(view, event) {
|
|
57
57
|
var target = event.target;
|
|
58
58
|
if (!(0, _utils.containsClassName)(target, _types.TableCssClassName.RESIZE_HANDLE_DECORATION)) {
|
|
59
59
|
return null;
|
|
@@ -79,7 +79,7 @@ var updateStickyMargins = function updateStickyMargins(table) {
|
|
|
79
79
|
exports.updateStickyMargins = updateStickyMargins;
|
|
80
80
|
var applyColWidthsToStickyRow = function applyColWidthsToStickyRow(colGroup, headerRow) {
|
|
81
81
|
// sync column widths for the sticky row
|
|
82
|
-
var newCols = (0, _columnControls.colWidthsForRow)(
|
|
82
|
+
var newCols = (0, _columnControls.colWidthsForRow)(headerRow);
|
|
83
83
|
if (newCols) {
|
|
84
84
|
headerRow.style.gridTemplateColumns = newCols;
|
|
85
85
|
}
|
|
@@ -308,7 +308,7 @@ var getToolbarConfig = function getToolbarConfig(getEditorContainerWidth, editor
|
|
|
308
308
|
var _ref3 = getEditorFeatureFlags() || {},
|
|
309
309
|
tableCellOptionsInFloatingToolbar = _ref3.tableCellOptionsInFloatingToolbar;
|
|
310
310
|
var cellItems = getCellItems(config, state, getEditorView(), intl, getEditorContainerWidth, editorAnalyticsAPI, tableCellOptionsInFloatingToolbar);
|
|
311
|
-
var colorPicker = getColorPicker(state, menu, intl,
|
|
311
|
+
var colorPicker = getColorPicker(state, menu, intl, editorAnalyticsAPI, tableCellOptionsInFloatingToolbar);
|
|
312
312
|
|
|
313
313
|
// Check if we need to show confirm dialog for delete button
|
|
314
314
|
var confirmDialog;
|
|
@@ -411,7 +411,7 @@ var getCellItems = function getCellItems(pluginConfig, state, view, _ref4, getEd
|
|
|
411
411
|
}
|
|
412
412
|
return [];
|
|
413
413
|
};
|
|
414
|
-
var getColorPicker = function getColorPicker(state, menu, _ref5,
|
|
414
|
+
var getColorPicker = function getColorPicker(state, menu, _ref5, editorAnalyticsAPI, tableCellOptionsInFloatingToolbar) {
|
|
415
415
|
var _node$attrs;
|
|
416
416
|
var formatMessage = _ref5.formatMessage;
|
|
417
417
|
var _getPluginState2 = (0, _pluginFactory.getPluginState)(state),
|
|
@@ -168,7 +168,7 @@ var rescaleColumns = function rescaleColumns(getEditorContainerWidth) {
|
|
|
168
168
|
// we update the table to have 48px for each column
|
|
169
169
|
if (!(0, _utils.hasTableBeenResized)(table.node) && columnWidthUnresized <= _styles.tableCellMinWidth || (0, _utils.hasTableBeenResized)(table.node) && (0, _colgroup.isMinCellWidthTable)(table.node)) {
|
|
170
170
|
var widths = new Array(noOfColumns).fill(_styles.tableCellMinWidth);
|
|
171
|
-
var cols = widths.map(function (
|
|
171
|
+
var cols = widths.map(function (_, index) {
|
|
172
172
|
return {
|
|
173
173
|
width: _styles.tableCellMinWidth,
|
|
174
174
|
minWidth: _styles.tableCellMinWidth,
|
|
@@ -59,7 +59,7 @@ var LayoutButton = /*#__PURE__*/function (_React$Component) {
|
|
|
59
59
|
_this = _super.call.apply(_super, [this].concat(args));
|
|
60
60
|
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "stickyButtonRef", /*#__PURE__*/(0, _react.createRef)());
|
|
61
61
|
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "resizeObserver", new ResizeObserver(function (entries) {
|
|
62
|
-
entries.forEach(function (
|
|
62
|
+
entries.forEach(function () {
|
|
63
63
|
var resizeButton = _this.stickyButtonRef.current;
|
|
64
64
|
var tableWrapper = _this.props.targetRef;
|
|
65
65
|
if (resizeButton && tableWrapper) {
|
|
@@ -41,7 +41,7 @@ var breakoutWidthStyling = function breakoutWidthStyling(useFragmentMarkBreakout
|
|
|
41
41
|
// TODO: https://product-fabric.atlassian.net/browse/DSP-4139
|
|
42
42
|
var tableStyles = function tableStyles(props) {
|
|
43
43
|
var _props$featureFlags, _props$featureFlags$u, _props$featureFlags2, _props$featureFlags3;
|
|
44
|
-
return (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n .", " button {\n background: ", ";\n color: ", ";\n cursor: none;\n }\n\n .", ":not(.", ") button:hover {\n background: ", ";\n color: ", " !important;\n cursor: pointer;\n }\n\n .ProseMirror {\n ", ";\n ", ";\n ", ";\n ", ";\n ", ";\n ", ";\n ", ";\n\n .", " {\n margin-bottom: 0;\n }\n\n .", " {\n td.", ", th.", " {\n position: relative;\n overflow: visible;\n }\n\n td.", " {\n background-color: ", ";\n\n // ED-15246: Trello card is visible through a border of a table border\n // This fixes a border issue caused by relative positioned table cells\n &::after {\n height: 100%;\n content: '';\n border-left: 1px solid ", ";\n border-bottom: 1px solid ", ";\n position: absolute;\n right: 0px;\n top: 0px;\n bottom: 0;\n width: 100%;\n display: inline-block;\n pointer-events: none;\n }\n }\n }\n\n .", " {\n ", "\n }\n\n .", " {\n ", "\n }\n\n /* Delete button */\n ", "\n /* Ends Delete button */\n\n /* sticky styles */\n .", " .", " .", ":first-of-type {\n margin-top: ", "px;\n width: ", "px;\n\n position: fixed !important;\n z-index: ", " !important;\n box-shadow: 0px -", "px ", ";\n border-right: 0 none;\n /* top set by NumberColumn component */\n }\n\n .", " .", ".sticky {\n position: fixed !important;\n /* needs to be above row controls */\n z-index: ", " !important;\n background: ", ";\n\n width: ", "px;\n height: ", "px;\n }\n\n .", ".sticky .", " {\n border-bottom: 0px none;\n border-right: 0px none;\n\n height: ", "px;\n width: ", "px;\n }\n\n .", " .", " {\n z-index: 0;\n }\n\n .", "\n .", "\n .", ".sticky {\n position: fixed !important;\n z-index: ", " !important;\n display: flex;\n border-left: ", "px solid\n ", ";\n margin-left: -", "px;\n }\n\n .", " col:first-of-type {\n /* moving rows out of a table layout does weird things in Chrome */\n border-right: 1px solid ", ";\n }\n\n tr.sticky {\n padding-top: ", "px;\n position: fixed;\n display: grid;\n\n /* to keep it above cell selection */\n z-index: ", ";\n\n overflow-y: visible;\n overflow-x: hidden;\n\n grid-auto-flow: column;\n\n /* background for where controls apply */\n background: ", ";\n box-sizing: content-box;\n\n margin-top: 2px;\n\n box-shadow: 0 6px 4px -4px ", ";\n margin-left: -1px;\n\n &.no-pointer-events {\n pointer-events: none;\n }\n }\n\n .", " .", " {\n left: unset;\n position: fixed;\n z-index: ", ";\n }\n\n .", ".", "\n .", " {\n padding-bottom: ", "px;\n }\n\n tr.sticky th {\n border-bottom: ", "px solid\n ", ";\n margin-right: -1px;\n }\n\n .", " tr.sticky > th:last-child {\n border-right-width: 1px;\n }\n\n /* add left edge for first cell */\n .", " tr.sticky > th:first-of-type {\n margin-left: 0px;\n }\n\n /* add a little bit so the scroll lines up with the table */\n .", " tr.sticky::after {\n content: ' ';\n width: ", "px;\n }\n\n /* To fix jumpiness caused in Chrome Browsers for sticky headers */\n .", " .sticky + tr {\n min-height: 0px;\n }\n\n /* move resize line a little in sticky bar */\n .", ".", " {\n tr.sticky\n td.", ",\n tr.sticky\n th.", " {\n .", "::after {\n right: ", "px;\n }\n }\n\n /* when selected put it back to normal -- :not selector would be nicer */\n tr.sticky\n td.", ".", ",\n tr.sticky\n th.", ".", " {\n .", "::after {\n right: ", "px;\n }\n }\n }\n\n tr.sticky\n .", ",\n tr.sticky\n .", " {\n z-index: 1;\n }\n\n .", " tr.sticky {\n padding-top: ", "px;\n }\n\n .", ".", "\n .", "\n .", ":first-of-type {\n margin-top: ", "px;\n }\n\n .", ".sticky {\n border-top: ", "px solid\n ", ";\n }\n\n ", "\n ", "\n\n .", " .", " {\n height: 0; // stop overflow flash & set correct height in update-overflow-shadows.ts\n }\n\n .less-padding {\n padding: 0 ", "px;\n\n .", " {\n padding: 0 ", "px;\n\n // https://product-fabric.atlassian.net/browse/ED-16386\n // Fixes issue where the extra padding that is added here throws off the position\n // of the rows control dot\n &::after {\n right: 6px !important;\n }\n }\n\n &.", "[data-number-column='true'] {\n padding-left: ", "px;\n }\n\n .", " {\n left: 6px;\n }\n\n .", " {\n left: calc(100% - 6px);\n }\n }\n\n > .", " {\n /**\n * Prevent margins collapsing, aids with placing the gap-cursor correctly\n * @see https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing\n *\n * TODO: Enable this, many tests will fail!\n * border-top: 1px solid transparent;\n */\n }\n\n /* Breakout only works on top level unless wrapped in fragment mark */\n ", "\n\n ", ";\n\n /* Corner controls */\n .", " {\n width: ", "px;\n height: ", "px;\n display: none;\n\n .", " {\n position: relative;\n\n ", ";\n }\n }\n\n .", ".sticky {\n .", " {\n /* sticky row insert dot overlaps other row insert and messes things up */\n display: none !important;\n }\n }\n\n .", " {\n position: absolute;\n top: 0;\n width: ", "px;\n height: ", "px;\n border: 1px solid ", ";\n border-radius: 0;\n border-top-left-radius: ", "px;\n background: ", ";\n box-sizing: border-box;\n padding: 0;\n :focus {\n outline: none;\n }\n }\n .active .", " {\n border-color: ", ";\n background: ", ";\n }\n\n .", "[data-number-column='true'] {\n .", ", .", " {\n width: ", "px;\n }\n .", " .", " {\n border-right-width: 0;\n }\n }\n\n :not(.", ") .", ":hover {\n border-color: ", ";\n background: ", ";\n cursor: pointer;\n }\n\n :not(.", ")\n .", ".", " {\n border-color: ", ";\n background: ", ";\n }\n\n /* Row controls */\n .", " {\n width: ", "px;\n box-sizing: border-box;\n display: none;\n position: relative;\n\n ", ";\n\n .", " {\n display: flex;\n flex-direction: column;\n }\n .", ":last-child > button {\n border-bottom-left-radius: ", "px;\n }\n .", " {\n position: relative;\n margin-top: -1px;\n }\n .", ":hover,\n .", ".active,\n .", ":hover {\n z-index: ", ";\n }\n\n ", "\n }\n\n :not(.", ") .", " {\n ", "\n ", "\n }\n\n /* Numbered column */\n .", " {\n position: relative;\n float: right;\n margin-left: ", "px;\n top: ", "px;\n width: ", "px;\n box-sizing: border-box;\n }\n\n .", " {\n border: 1px solid ", ";\n box-sizing: border-box;\n margin-top: -1px;\n padding-bottom: 2px;\n padding: 10px 2px;\n text-align: center;\n font-size: ", ";\n background-color: ", ";\n color: ", ";\n border-color: ", ";\n\n :first-child:not(style),\n style:first-child + * {\n margin-top: 0;\n }\n :last-child {\n border-bottom: 1px solid ", ";\n }\n }\n\n .", " {\n .", ", .", " {\n display: block;\n }\n .", " {\n padding-left: 1px;\n .", " {\n border-left: 0 none;\n }\n\n .", ".active {\n border-bottom: 1px solid ", ";\n border-color: ", ";\n background-color: ", ";\n position: relative;\n z-index: ", ";\n color: ", ";\n }\n }\n }\n :not(.", ") .", " {\n .", " {\n cursor: pointer;\n }\n .", ":hover {\n border-bottom: 1px solid ", ";\n border-color: ", ";\n background-color: ", ";\n position: relative;\n z-index: ", ";\n color: ", ";\n }\n .", ".", " {\n background-color: ", ";\n border: 1px solid ", ";\n border-left: 0;\n color: ", ";\n position: relative;\n z-index: ", ";\n }\n }\n\n /* Table */\n .", " > table {\n table-layout: fixed;\n white-space: normal;\n border-top: none;\n // 1px border width offset added here to prevent unwanted overflow and scolling - ED-16212\n margin-right: -1px;\n // Allows better positioning for the shadow sentinels - ED-16668\n position: relative;\n\n > tbody > tr {\n white-space: pre-wrap;\n }\n\n .", " + * {\n margin-top: 0;\n }\n\n /*\n * Headings have a top margin by default, but we don't want this on the\n * first heading within table header cells.\n *\n * This specifically sets margin-top for the first heading within a header\n * cell when center/right aligned.\n */\n th.", " > .fabric-editor-block-mark {\n > h1:first-of-type,\n > h2:first-of-type,\n > h3:first-of-type,\n > h4:first-of-type,\n > h5:first-of-type,\n > h6:first-of-type {\n margin-top: 0;\n }\n }\n\n .", ", .", " {\n position: relative;\n }\n /* Give selected cells a blue overlay */\n .", "::after,\n .", "::after {\n z-index: ", ";\n position: absolute;\n content: '';\n left: 0;\n right: 0;\n top: 0;\n bottom: 0;\n width: 100%;\n pointer-events: none;\n }\n .", " {\n border: 1px solid ", ";\n }\n .", "::after {\n background: ", ";\n z-index: ", ";\n }\n th.", "::after,\n td.", "::after {\n background: ", ";\n z-index: ", ";\n }\n // ED-15246: Trello card is visible through a border of a table border\n td.", ", td.", " {\n &::after {\n height: 100%;\n width: 100%;\n border: 1px solid ", ";\n content: '';\n position: absolute;\n left: -1px;\n top: -1px;\n bottom: 0;\n z-index: ", ";\n display: inline-block;\n pointer-events: none;\n }\n &.", "::after {\n border: 1px solid ", ";\n z-index: ", ";\n }\n }\n }\n .", " {\n position: absolute;\n /* top of corner control is table margin top - corner control height + 1 pixel of table border. */\n top: ", "px;\n }\n .", ".", " {\n z-index: ", ";\n }\n .", " {\n left: -", "px;\n }\n .", " {\n padding-right: ", "px;\n margin-right: -", "px;\n padding-bottom: 0px;\n /* fixes gap cursor height */\n overflow: auto;\n overflow-y: hidden;\n position: relative;\n }\n }\n\n .ProseMirror.", " {\n .", " {\n overflow-x: auto;\n ", ";\n }\n }\n\n .ProseMirror.", " {\n cursor: col-resize;\n }\n\n /*\n ED-15882: When custom start numbers is enabled for lists, we have\n styles that handle this generally (in editor-common) so we can\n throw away the older table-specific styles here.\n */\n ", "\n\n ", "\n"])), _types.TableCssClassName.LAYOUT_BUTTON, "var(--ds-background-neutral, ".concat(_colors.N20A, ")"), "var(--ds-icon, ".concat(_colors.N300, ")"), _types.TableCssClassName.LAYOUT_BUTTON, _types.TableCssClassName.IS_RESIZING, "var(--ds-background-neutral-hovered, ".concat(_colors.B300, ")"), "var(--ds-icon, white)", (0, _styles.tableSharedStyle)(props), (0, _uiStyles.columnControlsLineMarker)(props), _uiStyles.hoveredDeleteButton, _uiStyles.hoveredCell, _uiStyles.hoveredWarningCell, _uiStyles.resizeHandle, rangeSelectionStyles, _types.TableCssClassName.LAST_ITEM_IN_CELL, _types.TableCssClassName.TABLE_NODE_WRAPPER, _types.TableCssClassName.TABLE_CELL, _types.TableCssClassName.TABLE_HEADER_CELL, _types.TableCssClassName.TABLE_CELL, (0, _consts.tableCellBackgroundColor)(props), (0, _consts.tableBorderColor)(props), (0, _consts.tableBorderColor)(props), _types.TableCssClassName.CONTROLS_FLOATING_BUTTON_COLUMN, _uiStyles.insertColumnButtonWrapper, _types.TableCssClassName.CONTROLS_FLOATING_BUTTON_ROW, _uiStyles.insertRowButtonWrapper, _uiStyles.DeleteButton, _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.NUMBERED_COLUMN, _types.TableCssClassName.NUMBERED_COLUMN_BUTTON, _consts.stickyRowOffsetTop + 2, _editorSharedStyles.akEditorTableNumberColumnWidth, _editorSharedStyles.akEditorStickyHeaderZIndex, _consts.stickyRowOffsetTop, "var(--ds-surface, white)", _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.CORNER_CONTROLS, _editorSharedStyles.akEditorSmallZIndex, "var(--ds-surface, white)", _consts.tableToolbarSize, _consts.tableToolbarSize, _types.TableCssClassName.CORNER_CONTROLS, _types.TableCssClassName.CONTROLS_CORNER_BUTTON, _consts.tableToolbarSize, _consts.tableToolbarSize, _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.COLUMN_CONTROLS_DECORATIONS, _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.ROW_CONTROLS, _types.TableCssClassName.ROW_CONTROLS_BUTTON_WRAP, _editorSharedStyles.akEditorStickyHeaderZIndex, _consts.tableToolbarSize, "var(--ds-surface, white)", _consts.tableToolbarSize, _types.TableCssClassName.TABLE_STICKY, "var(--ds-surface, green)", _consts.stickyRowOffsetTop, _consts.stickyRowZIndex, "var(--ds-surface, white)", "var(--ds-shadow-overflow-perimeter, ".concat(_colors.N40A, ")"), _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.TABLE_STICKY_SHADOW, _consts.stickyRowZIndex + 1, _types.TableCssClassName.WITH_CONTROLS, _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.TABLE_STICKY_SHADOW, _consts.tableToolbarSize, _consts.stickyHeaderBorderBottomWidth, (0, _consts.tableBorderColor)(props), _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.TABLE_STICKY, insertColumnButtonOffset + 1, _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.TABLE_CONTAINER, _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.WITH_RESIZE_LINE, _types.TableCssClassName.WITH_RESIZE_LINE, _types.TableCssClassName.RESIZE_HANDLE_DECORATION, (_consts.resizeHandlerAreaWidth - _consts.resizeLineWidth) / 2 + 1, _types.TableCssClassName.WITH_RESIZE_LINE, _types.TableCssClassName.SELECTED_CELL, _types.TableCssClassName.WITH_RESIZE_LINE, _types.TableCssClassName.SELECTED_CELL, _types.TableCssClassName.RESIZE_HANDLE_DECORATION, (_consts.resizeHandlerAreaWidth - _consts.resizeLineWidth) / 2, _types.TableCssClassName.HOVERED_CELL, _types.TableCssClassName.SELECTED_CELL, _types.TableCssClassName.WITH_CONTROLS, _consts.tableControlsSpacing, _types.TableCssClassName.WITH_CONTROLS, _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.NUMBERED_COLUMN, _types.TableCssClassName.NUMBERED_COLUMN_BUTTON, _consts.tableControlsSpacing + 2, _types.TableCssClassName.CORNER_CONTROLS, _consts.tableControlsSpacing - _consts.tableToolbarSize + 2, "var(--ds-surface, white)", (_props$featureFlags = props.featureFlags) !== null && _props$featureFlags !== void 0 && _props$featureFlags.stickyHeadersOptimization ? sentinelStyles : '', (0, _uiStyles.OverflowShadow)(props), _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.TABLE_STICKY_SHADOW, _consts.tablePadding, _types.TableCssClassName.ROW_CONTROLS_WRAPPER, _consts.tablePadding, _types.TableCssClassName.TABLE_CONTAINER, _editorSharedStyles.akEditorTableNumberColumnWidth + _consts.tablePadding - 1, _types.TableCssClassName.TABLE_LEFT_SHADOW, _types.TableCssClassName.TABLE_RIGHT_SHADOW, _types.TableCssClassName.NODEVIEW_WRAPPER, breakoutWidthStyling((_props$featureFlags$u = (_props$featureFlags2 = props.featureFlags) === null || _props$featureFlags2 === void 0 ? void 0 : _props$featureFlags2.useFragmentMarkBreakoutWidthStylingFix) !== null && _props$featureFlags$u !== void 0 ? _props$featureFlags$u : true), (0, _uiStyles.columnControlsDecoration)(props), _types.TableCssClassName.CORNER_CONTROLS, _consts.tableToolbarSize + 1, cornerControlHeight, _types.TableCssClassName.CORNER_CONTROLS_INSERT_ROW_MARKER, (0, _uiStyles.InsertMarker)(props, "\n left: -11px;\n top: 9px;\n "), _types.TableCssClassName.CORNER_CONTROLS, _types.TableCssClassName.CORNER_CONTROLS_INSERT_ROW_MARKER, _types.TableCssClassName.CONTROLS_CORNER_BUTTON, _consts.tableToolbarSize + 1, _consts.tableToolbarSize + 1, (0, _consts.tableBorderColor)(props), _consts.tableBorderRadiusSize, (0, _consts.tableHeaderCellBackgroundColor)(props), _types.TableCssClassName.CONTROLS_CORNER_BUTTON, _consts.tableBorderSelectedColor, "var(--ds-background-selected, ".concat(_consts.tableToolbarSelectedColor, ")"), _types.TableCssClassName.TABLE_CONTAINER, _types.TableCssClassName.CORNER_CONTROLS, _types.TableCssClassName.CONTROLS_CORNER_BUTTON, _editorSharedStyles.akEditorTableToolbarSize + _editorSharedStyles.akEditorTableNumberColumnWidth, _types.TableCssClassName.ROW_CONTROLS, _types.TableCssClassName.CONTROLS_BUTTON, _types.TableCssClassName.IS_RESIZING, _types.TableCssClassName.CONTROLS_CORNER_BUTTON, _consts.tableBorderSelectedColor, "var(--ds-background-selected, ".concat(_consts.tableToolbarSelectedColor, ")"), _types.TableCssClassName.IS_RESIZING, _types.TableCssClassName.CONTROLS_CORNER_BUTTON, _types.TableCssClassName.HOVERED_CELL_IN_DANGER, _consts.tableBorderDeleteColor, "var(--ds-background-danger, ".concat(_consts.tableToolbarDeleteColor, ")"), _types.TableCssClassName.ROW_CONTROLS, _consts.tableToolbarSize, (0, _uiStyles.InsertMarker)(props, "\n bottom: -1px;\n left: -11px;\n "), _types.TableCssClassName.ROW_CONTROLS_INNER, _types.TableCssClassName.ROW_CONTROLS_BUTTON_WRAP, _consts.tableBorderRadiusSize, _types.TableCssClassName.ROW_CONTROLS_BUTTON_WRAP, _types.TableCssClassName.ROW_CONTROLS_BUTTON_WRAP, _types.TableCssClassName.ROW_CONTROLS_BUTTON_WRAP, _types.TableCssClassName.CONTROLS_BUTTON, _editorSharedStyles.akEditorUnitZIndex, (0, _uiStyles.HeaderButton)(props, "\n border-bottom: 1px solid ".concat((0, _consts.tableBorderColor)(props), ";\n border-right: 0px;\n border-radius: 0;\n height: 100%;\n width: ").concat(_consts.tableToolbarSize, "px;\n\n .").concat(_types.TableCssClassName.CONTROLS_BUTTON_OVERLAY, " {\n position: absolute;\n width: 30px;\n height: 50%;\n right: 0;\n bottom: 0;\n }\n .").concat(_types.TableCssClassName.CONTROLS_BUTTON_OVERLAY, ":first-of-type {\n top: 0;\n }\n ")), _types.TableCssClassName.IS_RESIZING, _types.TableCssClassName.ROW_CONTROLS, (0, _uiStyles.HeaderButtonHover)(), (0, _uiStyles.HeaderButtonDanger)(), _types.TableCssClassName.NUMBERED_COLUMN, _editorSharedStyles.akEditorTableToolbarSize - 1, _editorSharedStyles.akEditorTableToolbarSize, _editorSharedStyles.akEditorTableNumberColumnWidth + 1, _types.TableCssClassName.NUMBERED_COLUMN_BUTTON, (0, _consts.tableBorderColor)(props), (0, _editorSharedStyles.relativeFontSizeToBase16)((0, _constants.fontSize)()), (0, _consts.tableHeaderCellBackgroundColor)(props), (0, _consts.tableTextColor)(props), (0, _consts.tableBorderColor)(props), (0, _consts.tableBorderColor)(props), _types.TableCssClassName.WITH_CONTROLS, _types.TableCssClassName.CORNER_CONTROLS, _types.TableCssClassName.ROW_CONTROLS, _types.TableCssClassName.NUMBERED_COLUMN, _types.TableCssClassName.NUMBERED_COLUMN_BUTTON, _types.TableCssClassName.NUMBERED_COLUMN_BUTTON, _consts.tableBorderSelectedColor, _consts.tableBorderSelectedColor, "var(--ds-background-selected, ".concat(_consts.tableToolbarSelectedColor, ")"), _editorSharedStyles.akEditorUnitZIndex, "var(--ds-text-selected, ".concat(_colors.N0, ")"), _types.TableCssClassName.IS_RESIZING, _types.TableCssClassName.WITH_CONTROLS, _types.TableCssClassName.NUMBERED_COLUMN_BUTTON, _types.TableCssClassName.NUMBERED_COLUMN_BUTTON, _consts.tableBorderSelectedColor, _consts.tableBorderSelectedColor, "var(--ds-background-selected, ".concat(_consts.tableToolbarSelectedColor, ")"), _editorSharedStyles.akEditorUnitZIndex, "var(--ds-text-selected, ".concat(_colors.N0, ")"), _types.TableCssClassName.NUMBERED_COLUMN_BUTTON, _types.TableCssClassName.HOVERED_CELL_IN_DANGER, "var(--ds-background-danger, ".concat(_consts.tableToolbarDeleteColor, ")"), _consts.tableBorderDeleteColor, "var(--ds-text-danger, ".concat(_colors.R500, ")"), _editorSharedStyles.akEditorUnitZIndex, _types.TableCssClassName.TABLE_NODE_WRAPPER, _types.TableCssClassName.COLUMN_CONTROLS_DECORATIONS, _types.TableCssClassName.TABLE_HEADER_CELL, _types.TableCssClassName.SELECTED_CELL, _types.TableCssClassName.HOVERED_CELL_IN_DANGER, _types.TableCssClassName.SELECTED_CELL, _types.TableCssClassName.HOVERED_CELL_IN_DANGER, _editorSharedStyles.akEditorSmallZIndex, _types.TableCssClassName.SELECTED_CELL, _consts.tableBorderSelectedColor, _types.TableCssClassName.SELECTED_CELL, _consts.tableCellSelectedColor, _editorSharedStyles.akEditorSmallZIndex, _types.TableCssClassName.HOVERED_CELL_IN_DANGER, _types.TableCssClassName.HOVERED_CELL_IN_DANGER, _consts.tableCellDeleteColor, _editorSharedStyles.akEditorUnitZIndex * 100, _types.TableCssClassName.HOVERED_CELL, _types.TableCssClassName.SELECTED_CELL, _consts.tableBorderSelectedColor, _editorSharedStyles.akEditorSmallZIndex, _types.TableCssClassName.HOVERED_CELL_IN_DANGER, _consts.tableBorderDeleteColor, _editorSharedStyles.akEditorUnitZIndex * 100, _types.TableCssClassName.ROW_CONTROLS_WRAPPER, _styles.tableMarginTop - cornerControlHeight + 1, _types.TableCssClassName.ROW_CONTROLS_WRAPPER, _types.TableCssClassName.TABLE_LEFT_SHADOW, _editorSharedStyles.akEditorUnitZIndex, _types.TableCssClassName.ROW_CONTROLS_WRAPPER, _consts.tableToolbarSize, _types.TableCssClassName.TABLE_NODE_WRAPPER, insertColumnButtonOffset, insertColumnButtonOffset, _types.TableCssClassName.IS_RESIZING, _types.TableCssClassName.TABLE_NODE_WRAPPER, _scrollbar.scrollbarStyles, _types.TableCssClassName.RESIZE_CURSOR, props !== null && props !== void 0 && (_props$featureFlags3 = props.featureFlags) !== null && _props$featureFlags3 !== void 0 && _props$featureFlags3.restartNumberedLists ? "" : listLargeNumericMarkersOldStyles, shadowSentinelStyles);
|
|
44
|
+
return (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n .", " button {\n background: ", ";\n color: ", ";\n cursor: none;\n }\n\n .", ":not(.", ") button:hover {\n background: ", ";\n color: ", " !important;\n cursor: pointer;\n }\n\n .ProseMirror {\n ", ";\n ", ";\n ", ";\n ", ";\n ", ";\n ", ";\n ", ";\n\n .", " {\n margin-bottom: 0;\n }\n\n .", " {\n td.", ", th.", " {\n position: relative;\n overflow: visible;\n }\n\n td.", " {\n background-color: ", ";\n\n // ED-15246: Trello card is visible through a border of a table border\n // This fixes a border issue caused by relative positioned table cells\n &::after {\n height: 100%;\n content: '';\n border-left: 1px solid ", ";\n border-bottom: 1px solid ", ";\n position: absolute;\n right: 0px;\n top: 0px;\n bottom: 0;\n width: 100%;\n display: inline-block;\n pointer-events: none;\n }\n }\n }\n\n .", " {\n ", "\n }\n\n .", " {\n ", "\n }\n\n /* Delete button */\n ", "\n /* Ends Delete button */\n\n /* sticky styles */\n .", " .", " .", ":first-of-type {\n margin-top: ", "px;\n width: ", "px;\n\n position: fixed !important;\n z-index: ", " !important;\n box-shadow: 0px -", "px ", ";\n border-right: 0 none;\n /* top set by NumberColumn component */\n }\n\n .", " .", ".sticky {\n position: fixed !important;\n /* needs to be above row controls */\n z-index: ", " !important;\n background: ", ";\n\n width: ", "px;\n height: ", "px;\n }\n\n .", ".sticky .", " {\n border-bottom: 0px none;\n border-right: 0px none;\n\n height: ", "px;\n width: ", "px;\n }\n\n .", " .", " {\n z-index: 0;\n }\n\n .", "\n .", "\n .", ".sticky {\n position: fixed !important;\n z-index: ", " !important;\n display: flex;\n border-left: ", "px solid\n ", ";\n margin-left: -", "px;\n }\n\n .", " col:first-of-type {\n /* moving rows out of a table layout does weird things in Chrome */\n border-right: 1px solid ", ";\n }\n\n tr.sticky {\n padding-top: ", "px;\n position: fixed;\n display: grid;\n\n /* to keep it above cell selection */\n z-index: ", ";\n\n overflow-y: visible;\n overflow-x: hidden;\n\n grid-auto-flow: column;\n\n /* background for where controls apply */\n background: ", ";\n box-sizing: content-box;\n\n margin-top: 2px;\n\n box-shadow: 0 6px 4px -4px ", ";\n margin-left: -1px;\n\n &.no-pointer-events {\n pointer-events: none;\n }\n }\n\n .", " .", " {\n left: unset;\n position: fixed;\n z-index: ", ";\n }\n\n .", ".", "\n .", " {\n padding-bottom: ", "px;\n }\n\n tr.sticky th {\n border-bottom: ", "px solid\n ", ";\n margin-right: -1px;\n }\n\n .", " tr.sticky > th:last-child {\n border-right-width: 1px;\n }\n\n /* add left edge for first cell */\n .", " tr.sticky > th:first-of-type {\n margin-left: 0px;\n }\n\n /* add a little bit so the scroll lines up with the table */\n .", " tr.sticky::after {\n content: ' ';\n width: ", "px;\n }\n\n /* To fix jumpiness caused in Chrome Browsers for sticky headers */\n .", " .sticky + tr {\n min-height: 0px;\n }\n\n /* move resize line a little in sticky bar */\n .", ".", " {\n tr.sticky\n td.", ",\n tr.sticky\n th.", " {\n .", "::after {\n right: ", "px;\n }\n }\n\n /* when selected put it back to normal -- :not selector would be nicer */\n tr.sticky\n td.", ".", ",\n tr.sticky\n th.", ".", " {\n .", "::after {\n right: ", "px;\n }\n }\n }\n\n tr.sticky\n .", ",\n tr.sticky\n .", " {\n z-index: 1;\n }\n\n .", " tr.sticky {\n padding-top: ", "px;\n }\n\n .", ".", "\n .", "\n .", ":first-of-type {\n margin-top: ", "px;\n }\n\n .", ".sticky {\n border-top: ", "px solid\n ", ";\n }\n\n ", "\n ", "\n\n .", " .", " {\n height: 0; // stop overflow flash & set correct height in update-overflow-shadows.ts\n }\n\n .less-padding {\n padding: 0 ", "px;\n\n .", " {\n padding: 0 ", "px;\n\n // https://product-fabric.atlassian.net/browse/ED-16386\n // Fixes issue where the extra padding that is added here throws off the position\n // of the rows control dot\n &::after {\n right: 6px !important;\n }\n }\n\n &.", "[data-number-column='true'] {\n padding-left: ", "px;\n }\n\n .", " {\n left: 6px;\n }\n\n .", " {\n left: calc(100% - 6px);\n }\n }\n\n > .", " {\n /**\n * Prevent margins collapsing, aids with placing the gap-cursor correctly\n * @see https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing\n *\n * TODO: Enable this, many tests will fail!\n * border-top: 1px solid transparent;\n */\n }\n\n /* Breakout only works on top level unless wrapped in fragment mark */\n ", "\n\n ", ";\n\n /* Corner controls */\n .", " {\n width: ", "px;\n height: ", "px;\n display: none;\n\n .", " {\n position: relative;\n\n ", ";\n }\n }\n\n .", ".sticky {\n .", " {\n /* sticky row insert dot overlaps other row insert and messes things up */\n display: none !important;\n }\n }\n\n .", " {\n position: absolute;\n top: 0;\n width: ", "px;\n height: ", "px;\n border: 1px solid ", ";\n border-radius: 0;\n border-top-left-radius: ", "px;\n background: ", ";\n box-sizing: border-box;\n padding: 0;\n :focus {\n outline: none;\n }\n }\n .active .", " {\n border-color: ", ";\n background: ", ";\n }\n\n .", "[data-number-column='true'] {\n .", ", .", " {\n width: ", "px;\n }\n .", " .", " {\n border-right-width: 0;\n }\n }\n\n :not(.", ") .", ":hover {\n border-color: ", ";\n background: ", ";\n cursor: pointer;\n }\n\n :not(.", ")\n .", ".", " {\n border-color: ", ";\n background: ", ";\n }\n\n /* Row controls */\n .", " {\n width: ", "px;\n box-sizing: border-box;\n display: none;\n position: relative;\n\n ", ";\n\n .", " {\n display: flex;\n flex-direction: column;\n }\n .", ":last-child > button {\n border-bottom-left-radius: ", "px;\n }\n .", " {\n position: relative;\n margin-top: -1px;\n }\n .", ":hover,\n .", ".active,\n .", ":hover {\n z-index: ", ";\n }\n\n ", "\n }\n\n :not(.", ") .", " {\n ", "\n ", "\n }\n\n /* Numbered column */\n .", " {\n position: relative;\n float: right;\n margin-left: ", "px;\n top: ", "px;\n width: ", "px;\n box-sizing: border-box;\n }\n\n .", " {\n border: 1px solid ", ";\n box-sizing: border-box;\n margin-top: -1px;\n padding-bottom: 2px;\n padding: 10px 2px;\n text-align: center;\n font-size: ", ";\n background-color: ", ";\n color: ", ";\n border-color: ", ";\n\n :first-child:not(style),\n style:first-child + * {\n margin-top: 0;\n }\n :last-child {\n border-bottom: 1px solid ", ";\n }\n }\n\n .", " {\n .", ", .", " {\n display: block;\n }\n .", " {\n padding-left: 1px;\n .", " {\n border-left: 0 none;\n }\n\n .", ".active {\n border-bottom: 1px solid ", ";\n border-color: ", ";\n background-color: ", ";\n position: relative;\n z-index: ", ";\n color: ", ";\n }\n }\n }\n :not(.", ") .", " {\n .", " {\n cursor: pointer;\n }\n .", ":hover {\n border-bottom: 1px solid ", ";\n border-color: ", ";\n background-color: ", ";\n position: relative;\n z-index: ", ";\n color: ", ";\n }\n .", ".", " {\n background-color: ", ";\n border: 1px solid ", ";\n border-left: 0;\n color: ", ";\n position: relative;\n z-index: ", ";\n }\n }\n\n /* Table */\n .", " > table {\n table-layout: fixed;\n white-space: normal;\n border-top: none;\n // 1px border width offset added here to prevent unwanted overflow and scolling - ED-16212\n margin-right: -1px;\n // Allows better positioning for the shadow sentinels - ED-16668\n position: relative;\n\n > tbody > tr {\n white-space: pre-wrap;\n }\n\n .", " + * {\n margin-top: 0;\n }\n\n /*\n * Headings have a top margin by default, but we don't want this on the\n * first heading within table header cells.\n *\n * This specifically sets margin-top for the first heading within a header\n * cell when center/right aligned.\n */\n th.", " > .fabric-editor-block-mark {\n > h1:first-of-type,\n > h2:first-of-type,\n > h3:first-of-type,\n > h4:first-of-type,\n > h5:first-of-type,\n > h6:first-of-type {\n margin-top: 0;\n }\n }\n\n .", ", .", " {\n position: relative;\n }\n /* Give selected cells a blue overlay */\n .", "::after,\n .", "::after {\n z-index: ", ";\n position: absolute;\n content: '';\n left: 0;\n right: 0;\n top: 0;\n bottom: 0;\n width: 100%;\n pointer-events: none;\n }\n .", " {\n border: 1px solid ", ";\n }\n .", "::after {\n background: ", ";\n z-index: ", ";\n }\n th.", "::after,\n td.", "::after {\n background: ", ";\n z-index: ", ";\n }\n // ED-15246: Trello card is visible through a border of a table border\n td.", ", td.", " {\n &::after {\n height: 100%;\n width: 100%;\n border: 1px solid ", ";\n content: '';\n position: absolute;\n left: -1px;\n top: -1px;\n bottom: 0;\n z-index: ", ";\n display: inline-block;\n pointer-events: none;\n }\n &.", "::after {\n border: 1px solid ", ";\n z-index: ", ";\n }\n }\n }\n .", " {\n position: absolute;\n /* top of corner control is table margin top - corner control height + 1 pixel of table border. */\n top: ", "px;\n }\n .", ".", " {\n z-index: ", ";\n }\n .", " {\n left: -", "px;\n }\n .", " {\n padding-right: ", "px;\n margin-right: -", "px;\n padding-bottom: 0px;\n /* fixes gap cursor height */\n overflow: auto;\n overflow-y: hidden;\n position: relative;\n }\n }\n\n .ProseMirror.", " {\n .", " {\n overflow-x: auto;\n ", ";\n }\n }\n\n .ProseMirror.", " {\n cursor: col-resize;\n }\n\n /*\n ED-15882: When custom start numbers is enabled for lists, we have\n styles that handle this generally (in editor-common) so we can\n throw away the older table-specific styles here.\n */\n ", "\n\n ", "\n"])), _types.TableCssClassName.LAYOUT_BUTTON, "var(--ds-background-neutral, ".concat(_colors.N20A, ")"), "var(--ds-icon, ".concat(_colors.N300, ")"), _types.TableCssClassName.LAYOUT_BUTTON, _types.TableCssClassName.IS_RESIZING, "var(--ds-background-neutral-hovered, ".concat(_colors.B300, ")"), "var(--ds-icon, white)", (0, _styles.tableSharedStyle)(props), (0, _uiStyles.columnControlsLineMarker)(), _uiStyles.hoveredDeleteButton, _uiStyles.hoveredCell, _uiStyles.hoveredWarningCell, _uiStyles.resizeHandle, rangeSelectionStyles, _types.TableCssClassName.LAST_ITEM_IN_CELL, _types.TableCssClassName.TABLE_NODE_WRAPPER, _types.TableCssClassName.TABLE_CELL, _types.TableCssClassName.TABLE_HEADER_CELL, _types.TableCssClassName.TABLE_CELL, (0, _consts.tableCellBackgroundColor)(props), (0, _consts.tableBorderColor)(props), (0, _consts.tableBorderColor)(props), _types.TableCssClassName.CONTROLS_FLOATING_BUTTON_COLUMN, _uiStyles.insertColumnButtonWrapper, _types.TableCssClassName.CONTROLS_FLOATING_BUTTON_ROW, _uiStyles.insertRowButtonWrapper, _uiStyles.DeleteButton, _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.NUMBERED_COLUMN, _types.TableCssClassName.NUMBERED_COLUMN_BUTTON, _consts.stickyRowOffsetTop + 2, _editorSharedStyles.akEditorTableNumberColumnWidth, _editorSharedStyles.akEditorStickyHeaderZIndex, _consts.stickyRowOffsetTop, "var(--ds-surface, white)", _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.CORNER_CONTROLS, _editorSharedStyles.akEditorSmallZIndex, "var(--ds-surface, white)", _consts.tableToolbarSize, _consts.tableToolbarSize, _types.TableCssClassName.CORNER_CONTROLS, _types.TableCssClassName.CONTROLS_CORNER_BUTTON, _consts.tableToolbarSize, _consts.tableToolbarSize, _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.COLUMN_CONTROLS_DECORATIONS, _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.ROW_CONTROLS, _types.TableCssClassName.ROW_CONTROLS_BUTTON_WRAP, _editorSharedStyles.akEditorStickyHeaderZIndex, _consts.tableToolbarSize, "var(--ds-surface, white)", _consts.tableToolbarSize, _types.TableCssClassName.TABLE_STICKY, "var(--ds-surface, green)", _consts.stickyRowOffsetTop, _consts.stickyRowZIndex, "var(--ds-surface, white)", "var(--ds-shadow-overflow-perimeter, ".concat(_colors.N40A, ")"), _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.TABLE_STICKY_SHADOW, _consts.stickyRowZIndex + 1, _types.TableCssClassName.WITH_CONTROLS, _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.TABLE_STICKY_SHADOW, _consts.tableToolbarSize, _consts.stickyHeaderBorderBottomWidth, (0, _consts.tableBorderColor)(props), _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.TABLE_STICKY, insertColumnButtonOffset + 1, _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.TABLE_CONTAINER, _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.WITH_RESIZE_LINE, _types.TableCssClassName.WITH_RESIZE_LINE, _types.TableCssClassName.RESIZE_HANDLE_DECORATION, (_consts.resizeHandlerAreaWidth - _consts.resizeLineWidth) / 2 + 1, _types.TableCssClassName.WITH_RESIZE_LINE, _types.TableCssClassName.SELECTED_CELL, _types.TableCssClassName.WITH_RESIZE_LINE, _types.TableCssClassName.SELECTED_CELL, _types.TableCssClassName.RESIZE_HANDLE_DECORATION, (_consts.resizeHandlerAreaWidth - _consts.resizeLineWidth) / 2, _types.TableCssClassName.HOVERED_CELL, _types.TableCssClassName.SELECTED_CELL, _types.TableCssClassName.WITH_CONTROLS, _consts.tableControlsSpacing, _types.TableCssClassName.WITH_CONTROLS, _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.NUMBERED_COLUMN, _types.TableCssClassName.NUMBERED_COLUMN_BUTTON, _consts.tableControlsSpacing + 2, _types.TableCssClassName.CORNER_CONTROLS, _consts.tableControlsSpacing - _consts.tableToolbarSize + 2, "var(--ds-surface, white)", (_props$featureFlags = props.featureFlags) !== null && _props$featureFlags !== void 0 && _props$featureFlags.stickyHeadersOptimization ? sentinelStyles : '', (0, _uiStyles.OverflowShadow)(props), _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.TABLE_STICKY_SHADOW, _consts.tablePadding, _types.TableCssClassName.ROW_CONTROLS_WRAPPER, _consts.tablePadding, _types.TableCssClassName.TABLE_CONTAINER, _editorSharedStyles.akEditorTableNumberColumnWidth + _consts.tablePadding - 1, _types.TableCssClassName.TABLE_LEFT_SHADOW, _types.TableCssClassName.TABLE_RIGHT_SHADOW, _types.TableCssClassName.NODEVIEW_WRAPPER, breakoutWidthStyling((_props$featureFlags$u = (_props$featureFlags2 = props.featureFlags) === null || _props$featureFlags2 === void 0 ? void 0 : _props$featureFlags2.useFragmentMarkBreakoutWidthStylingFix) !== null && _props$featureFlags$u !== void 0 ? _props$featureFlags$u : true), (0, _uiStyles.columnControlsDecoration)(props), _types.TableCssClassName.CORNER_CONTROLS, _consts.tableToolbarSize + 1, cornerControlHeight, _types.TableCssClassName.CORNER_CONTROLS_INSERT_ROW_MARKER, (0, _uiStyles.InsertMarker)(props, "\n left: -11px;\n top: 9px;\n "), _types.TableCssClassName.CORNER_CONTROLS, _types.TableCssClassName.CORNER_CONTROLS_INSERT_ROW_MARKER, _types.TableCssClassName.CONTROLS_CORNER_BUTTON, _consts.tableToolbarSize + 1, _consts.tableToolbarSize + 1, (0, _consts.tableBorderColor)(props), _consts.tableBorderRadiusSize, (0, _consts.tableHeaderCellBackgroundColor)(props), _types.TableCssClassName.CONTROLS_CORNER_BUTTON, _consts.tableBorderSelectedColor, "var(--ds-background-selected, ".concat(_consts.tableToolbarSelectedColor, ")"), _types.TableCssClassName.TABLE_CONTAINER, _types.TableCssClassName.CORNER_CONTROLS, _types.TableCssClassName.CONTROLS_CORNER_BUTTON, _editorSharedStyles.akEditorTableToolbarSize + _editorSharedStyles.akEditorTableNumberColumnWidth, _types.TableCssClassName.ROW_CONTROLS, _types.TableCssClassName.CONTROLS_BUTTON, _types.TableCssClassName.IS_RESIZING, _types.TableCssClassName.CONTROLS_CORNER_BUTTON, _consts.tableBorderSelectedColor, "var(--ds-background-selected, ".concat(_consts.tableToolbarSelectedColor, ")"), _types.TableCssClassName.IS_RESIZING, _types.TableCssClassName.CONTROLS_CORNER_BUTTON, _types.TableCssClassName.HOVERED_CELL_IN_DANGER, _consts.tableBorderDeleteColor, "var(--ds-background-danger, ".concat(_consts.tableToolbarDeleteColor, ")"), _types.TableCssClassName.ROW_CONTROLS, _consts.tableToolbarSize, (0, _uiStyles.InsertMarker)(props, "\n bottom: -1px;\n left: -11px;\n "), _types.TableCssClassName.ROW_CONTROLS_INNER, _types.TableCssClassName.ROW_CONTROLS_BUTTON_WRAP, _consts.tableBorderRadiusSize, _types.TableCssClassName.ROW_CONTROLS_BUTTON_WRAP, _types.TableCssClassName.ROW_CONTROLS_BUTTON_WRAP, _types.TableCssClassName.ROW_CONTROLS_BUTTON_WRAP, _types.TableCssClassName.CONTROLS_BUTTON, _editorSharedStyles.akEditorUnitZIndex, (0, _uiStyles.HeaderButton)(props, "\n border-bottom: 1px solid ".concat((0, _consts.tableBorderColor)(props), ";\n border-right: 0px;\n border-radius: 0;\n height: 100%;\n width: ").concat(_consts.tableToolbarSize, "px;\n\n .").concat(_types.TableCssClassName.CONTROLS_BUTTON_OVERLAY, " {\n position: absolute;\n width: 30px;\n height: 50%;\n right: 0;\n bottom: 0;\n }\n .").concat(_types.TableCssClassName.CONTROLS_BUTTON_OVERLAY, ":first-of-type {\n top: 0;\n }\n ")), _types.TableCssClassName.IS_RESIZING, _types.TableCssClassName.ROW_CONTROLS, (0, _uiStyles.HeaderButtonHover)(), (0, _uiStyles.HeaderButtonDanger)(), _types.TableCssClassName.NUMBERED_COLUMN, _editorSharedStyles.akEditorTableToolbarSize - 1, _editorSharedStyles.akEditorTableToolbarSize, _editorSharedStyles.akEditorTableNumberColumnWidth + 1, _types.TableCssClassName.NUMBERED_COLUMN_BUTTON, (0, _consts.tableBorderColor)(props), (0, _editorSharedStyles.relativeFontSizeToBase16)((0, _constants.fontSize)()), (0, _consts.tableHeaderCellBackgroundColor)(props), (0, _consts.tableTextColor)(props), (0, _consts.tableBorderColor)(props), (0, _consts.tableBorderColor)(props), _types.TableCssClassName.WITH_CONTROLS, _types.TableCssClassName.CORNER_CONTROLS, _types.TableCssClassName.ROW_CONTROLS, _types.TableCssClassName.NUMBERED_COLUMN, _types.TableCssClassName.NUMBERED_COLUMN_BUTTON, _types.TableCssClassName.NUMBERED_COLUMN_BUTTON, _consts.tableBorderSelectedColor, _consts.tableBorderSelectedColor, "var(--ds-background-selected, ".concat(_consts.tableToolbarSelectedColor, ")"), _editorSharedStyles.akEditorUnitZIndex, "var(--ds-text-selected, ".concat(_colors.N0, ")"), _types.TableCssClassName.IS_RESIZING, _types.TableCssClassName.WITH_CONTROLS, _types.TableCssClassName.NUMBERED_COLUMN_BUTTON, _types.TableCssClassName.NUMBERED_COLUMN_BUTTON, _consts.tableBorderSelectedColor, _consts.tableBorderSelectedColor, "var(--ds-background-selected, ".concat(_consts.tableToolbarSelectedColor, ")"), _editorSharedStyles.akEditorUnitZIndex, "var(--ds-text-selected, ".concat(_colors.N0, ")"), _types.TableCssClassName.NUMBERED_COLUMN_BUTTON, _types.TableCssClassName.HOVERED_CELL_IN_DANGER, "var(--ds-background-danger, ".concat(_consts.tableToolbarDeleteColor, ")"), _consts.tableBorderDeleteColor, "var(--ds-text-danger, ".concat(_colors.R500, ")"), _editorSharedStyles.akEditorUnitZIndex, _types.TableCssClassName.TABLE_NODE_WRAPPER, _types.TableCssClassName.COLUMN_CONTROLS_DECORATIONS, _types.TableCssClassName.TABLE_HEADER_CELL, _types.TableCssClassName.SELECTED_CELL, _types.TableCssClassName.HOVERED_CELL_IN_DANGER, _types.TableCssClassName.SELECTED_CELL, _types.TableCssClassName.HOVERED_CELL_IN_DANGER, _editorSharedStyles.akEditorSmallZIndex, _types.TableCssClassName.SELECTED_CELL, _consts.tableBorderSelectedColor, _types.TableCssClassName.SELECTED_CELL, _consts.tableCellSelectedColor, _editorSharedStyles.akEditorSmallZIndex, _types.TableCssClassName.HOVERED_CELL_IN_DANGER, _types.TableCssClassName.HOVERED_CELL_IN_DANGER, _consts.tableCellDeleteColor, _editorSharedStyles.akEditorUnitZIndex * 100, _types.TableCssClassName.HOVERED_CELL, _types.TableCssClassName.SELECTED_CELL, _consts.tableBorderSelectedColor, _editorSharedStyles.akEditorSmallZIndex, _types.TableCssClassName.HOVERED_CELL_IN_DANGER, _consts.tableBorderDeleteColor, _editorSharedStyles.akEditorUnitZIndex * 100, _types.TableCssClassName.ROW_CONTROLS_WRAPPER, _styles.tableMarginTop - cornerControlHeight + 1, _types.TableCssClassName.ROW_CONTROLS_WRAPPER, _types.TableCssClassName.TABLE_LEFT_SHADOW, _editorSharedStyles.akEditorUnitZIndex, _types.TableCssClassName.ROW_CONTROLS_WRAPPER, _consts.tableToolbarSize, _types.TableCssClassName.TABLE_NODE_WRAPPER, insertColumnButtonOffset, insertColumnButtonOffset, _types.TableCssClassName.IS_RESIZING, _types.TableCssClassName.TABLE_NODE_WRAPPER, _scrollbar.scrollbarStyles, _types.TableCssClassName.RESIZE_CURSOR, props !== null && props !== void 0 && (_props$featureFlags3 = props.featureFlags) !== null && _props$featureFlags3 !== void 0 && _props$featureFlags3.restartNumberedLists ? "" : listLargeNumericMarkersOldStyles, shadowSentinelStyles);
|
|
45
45
|
};
|
|
46
46
|
exports.tableStyles = tableStyles;
|
|
47
47
|
var tableFullPageEditorStyles = (0, _react.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n .ProseMirror .", " > table {\n margin-left: 0;\n // 1px border width offset added here to prevent unwanted overflow and scolling - ED-16212\n margin-right: -1px;\n width: 100%;\n }\n"])), _types.TableCssClassName.TABLE_NODE_WRAPPER);
|
|
@@ -49,7 +49,7 @@ var insertColumnButtonWrapper = (0, _react.css)(_templateObject10 || (_templateO
|
|
|
49
49
|
exports.insertColumnButtonWrapper = insertColumnButtonWrapper;
|
|
50
50
|
var insertRowButtonWrapper = (0, _react.css)(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2.default)(["\n ", "\n ", "\n ", "\n"])), InsertButton(), InsertButtonHover(), InsertLine("\n height: 2px;\n top: -11px;\n left: ".concat(_consts.tableInsertColumnButtonSize - 1, "px;\n ")));
|
|
51
51
|
exports.insertRowButtonWrapper = insertRowButtonWrapper;
|
|
52
|
-
var columnControlsLineMarker = function columnControlsLineMarker(
|
|
52
|
+
var columnControlsLineMarker = function columnControlsLineMarker() {
|
|
53
53
|
return (0, _react.css)(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2.default)(["\n .", ".", "\n table\n tr:first-of-type\n td,\n .", ".", "\n table\n tr:first-of-type\n th {\n position: relative;\n }\n"])), _types.TableCssClassName.TABLE_CONTAINER, _types.TableCssClassName.WITH_CONTROLS, _types.TableCssClassName.TABLE_CONTAINER, _types.TableCssClassName.WITH_CONTROLS);
|
|
54
54
|
};
|
|
55
55
|
exports.columnControlsLineMarker = columnControlsLineMarker;
|
|
@@ -142,7 +142,7 @@ var getRelativeDomCellWidths = function getRelativeDomCellWidths(_ref) {
|
|
|
142
142
|
return width * (cellColWidth / totalCalculatedCellWidth);
|
|
143
143
|
});
|
|
144
144
|
};
|
|
145
|
-
var colWidthsForRow = function colWidthsForRow(
|
|
145
|
+
var colWidthsForRow = function colWidthsForRow(tr) {
|
|
146
146
|
// get the colspans
|
|
147
147
|
var rowColSpans = (0, _utils2.maphElem)(tr, function (cell) {
|
|
148
148
|
return Number(cell.getAttribute('colspan') || 1 /* default to span of 1 */);
|
|
@@ -169,7 +169,7 @@ var colWidthsForRow = function colWidthsForRow(colGroup, tr) {
|
|
|
169
169
|
|
|
170
170
|
// reverse engineer cell widths from table widths
|
|
171
171
|
var domBasedCellWidths = [];
|
|
172
|
-
cellInfos.map(function (cell
|
|
172
|
+
cellInfos.map(function (cell) {
|
|
173
173
|
domBasedCellWidths.push.apply(domBasedCellWidths, (0, _toConsumableArray2.default)(getRelativeDomCellWidths(cell)));
|
|
174
174
|
});
|
|
175
175
|
if (cellInfos.reduce(function (acc, cell) {
|
|
@@ -24,7 +24,7 @@ var findControlsHoverDecoration = function findControlsHoverDecoration(decoratio
|
|
|
24
24
|
return filterDecorationByKey(_types.TableDecorations.ALL_CONTROLS_HOVER, decorationSet);
|
|
25
25
|
};
|
|
26
26
|
exports.findControlsHoverDecoration = findControlsHoverDecoration;
|
|
27
|
-
var createCellHoverDecoration = function createCellHoverDecoration(cells
|
|
27
|
+
var createCellHoverDecoration = function createCellHoverDecoration(cells) {
|
|
28
28
|
return cells.map(function (cell) {
|
|
29
29
|
return _prosemirrorView.Decoration.node(cell.pos, cell.pos + cell.node.nodeSize, {
|
|
30
30
|
class: _types.TableCssClassName.HOVERED_CELL_WARNING
|
package/dist/cjs/version.json
CHANGED
|
@@ -25,7 +25,7 @@ export const hoverMergedCells = () => createCommand(state => {
|
|
|
25
25
|
start: pos + table.start + 1,
|
|
26
26
|
node: table.node.nodeAt(pos)
|
|
27
27
|
}));
|
|
28
|
-
const decorations = createCellHoverDecoration(mergedCells
|
|
28
|
+
const decorations = createCellHoverDecoration(mergedCells);
|
|
29
29
|
return {
|
|
30
30
|
type: 'HOVER_CELLS',
|
|
31
31
|
data: {
|
|
@@ -5,21 +5,19 @@ import { convertArrayOfRowsToTableNode, convertTableNodeToArrayOfRows, findTable
|
|
|
5
5
|
import { createCompareNodes } from '@atlaskit/editor-common/utils';
|
|
6
6
|
import { createCommand, getPluginState } from '../pm-plugins/plugin-factory';
|
|
7
7
|
import { TableSortStep, TableSortOrder as SortOrder } from '@atlaskit/adf-schema/steps';
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
}
|
|
22
|
-
export const sortByColumn = (columnIndex, order = SortOrder.DESC) => createCommand(state => ({
|
|
8
|
+
const createGetInlineCardTextFromStore = attrs => {
|
|
9
|
+
const {
|
|
10
|
+
data
|
|
11
|
+
} = attrs;
|
|
12
|
+
if (data && (data.name || data.title)) {
|
|
13
|
+
return data.name || data.title;
|
|
14
|
+
}
|
|
15
|
+
const {
|
|
16
|
+
url: cardUrl
|
|
17
|
+
} = attrs;
|
|
18
|
+
return cardUrl;
|
|
19
|
+
};
|
|
20
|
+
export const sortByColumn = (columnIndex, order = SortOrder.DESC) => createCommand(() => ({
|
|
23
21
|
type: 'SORT_TABLE',
|
|
24
22
|
data: {
|
|
25
23
|
ordering: {
|
|
@@ -43,7 +41,7 @@ export const sortByColumn = (columnIndex, order = SortOrder.DESC) => createComma
|
|
|
43
41
|
headerRow = tableArray.shift();
|
|
44
42
|
}
|
|
45
43
|
const compareNodesInOrder = createCompareNodes({
|
|
46
|
-
getInlineCardTextFromStore: createGetInlineCardTextFromStore
|
|
44
|
+
getInlineCardTextFromStore: createGetInlineCardTextFromStore
|
|
47
45
|
}, order);
|
|
48
46
|
const sortedTable = tableArray.sort((rowA, rowB) => compareNodesInOrder(rowA[columnIndex], rowB[columnIndex]));
|
|
49
47
|
if (headerRow) {
|
|
@@ -129,7 +129,6 @@ const tablesPlugin = (options, api) => {
|
|
|
129
129
|
name: 'tableEditing',
|
|
130
130
|
plugin: () => tableEditing({
|
|
131
131
|
reportFixedTable: ({
|
|
132
|
-
state,
|
|
133
132
|
tr,
|
|
134
133
|
reason
|
|
135
134
|
}) => {
|
|
@@ -157,9 +156,7 @@ const tablesPlugin = (options, api) => {
|
|
|
157
156
|
}) => createTableLocalIdPlugin(dispatch)
|
|
158
157
|
}, {
|
|
159
158
|
name: 'tableAddWidth',
|
|
160
|
-
plugin: (
|
|
161
|
-
dispatch
|
|
162
|
-
}) => getBooleanFF('platform.editor.custom-table-width') && options ? createTableAddWidthPlugin(dispatch, options.fullWidthEnabled || false) : undefined
|
|
159
|
+
plugin: () => getBooleanFF('platform.editor.custom-table-width') && options ? createTableAddWidthPlugin(options.fullWidthEnabled || false) : undefined
|
|
163
160
|
}, {
|
|
164
161
|
name: 'tableGetEditorViewReferencePlugin',
|
|
165
162
|
plugin: () => {
|
|
@@ -313,7 +313,7 @@ class TableComponent extends React.Component {
|
|
|
313
313
|
}
|
|
314
314
|
this.props.eventDispatcher.off(stickyHeadersPluginKey.key, this.onStickyState);
|
|
315
315
|
}
|
|
316
|
-
componentDidUpdate(
|
|
316
|
+
componentDidUpdate() {
|
|
317
317
|
const {
|
|
318
318
|
view,
|
|
319
319
|
getNode,
|
|
@@ -369,7 +369,7 @@ class TableComponent extends React.Component {
|
|
|
369
369
|
if (this.wrapper && parent) {
|
|
370
370
|
const rightShadows = parent.querySelectorAll(`.${ClassName.TABLE_RIGHT_SHADOW}`);
|
|
371
371
|
const leftShadows = parent.querySelectorAll(`.${ClassName.TABLE_LEFT_SHADOW}`);
|
|
372
|
-
updateOverflowShadows(this.props.getEditorFeatureFlags)(this.
|
|
372
|
+
updateOverflowShadows(this.props.getEditorFeatureFlags)(this.wrapper, this.table, rightShadows, leftShadows);
|
|
373
373
|
}
|
|
374
374
|
}
|
|
375
375
|
render() {
|
|
@@ -13,7 +13,7 @@ export const updateShadowListForStickyStyles = (heightStyle, shadows) => {
|
|
|
13
13
|
* Update overflow shadows for a given wrapper & table.
|
|
14
14
|
* if `overflowShadowOptimization` is enabled, this will exit early.
|
|
15
15
|
*/
|
|
16
|
-
export const updateOverflowShadows = getEditorFeatureFlags => (
|
|
16
|
+
export const updateOverflowShadows = getEditorFeatureFlags => (wrapper, table, rightShadows, leftShadows) => {
|
|
17
17
|
var _getEditorFeatureFlag;
|
|
18
18
|
if (((_getEditorFeatureFlag = getEditorFeatureFlags()) === null || _getEditorFeatureFlag === void 0 ? void 0 : _getEditorFeatureFlag.tableOverflowShadowsOptimization) === true) {
|
|
19
19
|
return false;
|
|
@@ -217,7 +217,7 @@ export const createPlugin = (dispatchAnalyticsEvent, dispatch, portalProviderAPI
|
|
|
217
217
|
handleTextInput: ({
|
|
218
218
|
state,
|
|
219
219
|
dispatch
|
|
220
|
-
},
|
|
220
|
+
}, _from, _to, text) => {
|
|
221
221
|
const tr = replaceSelectedTable(state, text, INPUT_METHOD.KEYBOARD, editorAnalyticsAPI);
|
|
222
222
|
if (tr.selectionSet) {
|
|
223
223
|
dispatch(tr);
|