@atlaskit/editor-plugin-table
Version:
Table plugin for the @atlaskit/editor
621 lines (615 loc) • 41.4 kB
JavaScript
import _defineProperty from "@babel/runtime/helpers/defineProperty";
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
import React, { useEffect } from 'react';
import { tableCell, tableCellWithNestedTable, tableHeader, tableHeaderWithLocalId, tableHeaderWithNestedTable, tableRow, tableRowWithNestedTable, tableRowWithLocalId, tableCellWithLocalId, tableCellWithNestedTableWithLocalId, tableRowWithNestedTableWithLocalId, tableHeaderWithNestedTableWithLocalId } from '@atlaskit/adf-schema';
import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD, TABLE_ACTION } from '@atlaskit/editor-common/analytics';
import { browser as browserLegacy, getBrowserInfo } from '@atlaskit/editor-common/browser';
import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
import { IconTable } from '@atlaskit/editor-common/icons';
import { toggleTable, tooltip } from '@atlaskit/editor-common/keymaps';
import { toolbarInsertBlockMessages as messages } from '@atlaskit/editor-common/messages';
import { getParentOfTypeCount, getPositionAfterTopParentNodeOfType } from '@atlaskit/editor-common/nesting';
import { editorCommandToPMCommand } from '@atlaskit/editor-common/preset';
import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
import { hasParentNodeOfType, safeInsert } from '@atlaskit/editor-prosemirror/utils';
import { tableEditing } from '@atlaskit/editor-tables/pm-plugins';
import { fg } from '@atlaskit/platform-feature-flags';
import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
import { tableNodeSpecWithFixedToDOM } from './nodeviews/toDOM';
import { createPlugin as createTableAnalyticsPlugin } from './pm-plugins/analytics/plugin';
import { insertTableWithNestingSupport } from './pm-plugins/commands/insert';
import { pluginConfig } from './pm-plugins/create-plugin-config';
import { createPlugin as createDecorationsPlugin } from './pm-plugins/decorations/plugin';
import { createPlugin as createDragAndDropPlugin } from './pm-plugins/drag-and-drop/plugin';
import { pluginKey as dragAndDropPluginKey } from './pm-plugins/drag-and-drop/plugin-key';
import { createPlugin as createContentAreaHeightPlugin, pluginKey as editorContentAreaHeightPluginKey } from './pm-plugins/editor-content-area-height';
import { keymapPlugin } from './pm-plugins/keymap';
import { createPlugin } from './pm-plugins/main';
import { pluginKey } from './pm-plugins/plugin-key';
import { createPlugin as createTableSafariDeleteCompositionTextIssueWorkaroundPlugin } from './pm-plugins/safari-delete-composition-text-issue-workaround';
import { createPlugin as createStickyHeadersPlugin } from './pm-plugins/sticky-headers/plugin';
import { pluginKey as stickyHeadersPluginKey } from './pm-plugins/sticky-headers/plugin-key';
import { findStickyHeaderForTable } from './pm-plugins/sticky-headers/util';
import { createPlugin as createTableOverflowAnalyticsPlugin } from './pm-plugins/table-analytics';
import { createPlugin as createTableAnchorNamesPlugin } from './pm-plugins/table-anchor-names/plugin';
import { createPlugin as createTableLocalIdPlugin } from './pm-plugins/table-local-id';
import { createPlugin as createFlexiResizingPlugin } from './pm-plugins/table-resizing/plugin';
import { getPluginState as getFlexiResizingPlugin } from './pm-plugins/table-resizing/plugin-factory';
import { tableSelectionKeymapPlugin } from './pm-plugins/table-selection-keymap';
import { createPlugin as createSizeSelectorPlugin, pluginKey as sizeSelectorPluginKey } from './pm-plugins/table-size-selector';
import { createPlugin as createTableWidthPlugin, pluginKey as tableWidthPluginKey } from './pm-plugins/table-width';
import { createPlugin as createTableWidthInCommentFixPlugin } from './pm-plugins/table-width-in-comment-fix';
import { getHeightInfoPayload, getWidthInfoPayload } from './pm-plugins/utils/analytics';
import { createTableWithWidth } from './pm-plugins/utils/create';
import { createPlugin as createViewModeSortPlugin } from './pm-plugins/view-mode-sort';
import { ContentComponent } from './ui/ContentComponent';
import { getToolbarConfig } from './ui/toolbar';
var defaultGetEditorFeatureFlags = function defaultGetEditorFeatureFlags() {
return {};
};
// we want to calculate all the table widths (which causes reflows) after the editor has finished loading to mitigate performance impact
var TABLE_WIDTH_INFO_TIMEOUT = 10000;
/**
* Table plugin to be added to an `EditorPresetBuilder` and used with `ComposableEditor`
* from `@atlaskit/editor-core`.
*/
var tablePlugin = function tablePlugin(_ref) {
var _config$tableOptions, _api$analytics, _options$getEditorFea, _options$getEditorFea2;
var config = _ref.config,
api = _ref.api;
var editorViewRef = {
current: null
};
var options = _objectSpread(_objectSpread({}, config), {}, {
tableOptions: (_config$tableOptions = config === null || config === void 0 ? void 0 : config.tableOptions) !== null && _config$tableOptions !== void 0 ? _config$tableOptions : {},
dragAndDropEnabled: (config === null || config === void 0 ? void 0 : config.dragAndDropEnabled) || fg('platform_editor_enable_table_dnd'),
isTableScalingEnabled: (config === null || config === void 0 ? void 0 : config.isTableScalingEnabled) || fg('platform_editor_enable_table_scaling')
});
var defaultGetEditorContainerWidth = function defaultGetEditorContainerWidth() {
var _api$width$sharedStat, _api$width, _document$body$offset, _document;
return (_api$width$sharedStat = api === null || api === void 0 || (_api$width = api.width) === null || _api$width === void 0 ? void 0 : _api$width.sharedState.currentState()) !== null && _api$width$sharedStat !== void 0 ? _api$width$sharedStat : {
width: (_document$body$offset = (_document = document) === null || _document === void 0 || (_document = _document.body) === null || _document === void 0 ? void 0 : _document.offsetWidth) !== null && _document$body$offset !== void 0 ? _document$body$offset : 500
};
};
var editorAnalyticsAPI = api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions;
var isTableFixedColumnWidthsOptionEnabled = fg('platform_editor_table_fixed_column_width_prop') ? options === null || options === void 0 ? void 0 : options.allowFixedColumnWidthOption : (options === null || options === void 0 || (_options$getEditorFea = options.getEditorFeatureFlags) === null || _options$getEditorFea === void 0 ? void 0 : _options$getEditorFea.call(options).tableWithFixedColumnWidthsOption) || false;
var shouldUseIncreasedScalingPercent = (options === null || options === void 0 ? void 0 : options.isTableScalingEnabled) && (isTableFixedColumnWidthsOptionEnabled || ( // When in comment editor, we need the scaling percent to be 40% while tableWithFixedColumnWidthsOption is not visible
options === null || options === void 0 ? void 0 : options.isCommentEditor));
var isTableSelectorEnabled =
// eslint-disable-next-line @atlaskit/platform/no-preconditioning
!(options !== null && options !== void 0 && options.isChromelessEditor) && !(options !== null && options !== void 0 && options.isCommentEditor) && (options === null || options === void 0 || (_options$getEditorFea2 = options.getEditorFeatureFlags) === null || _options$getEditorFea2 === void 0 ? void 0 : _options$getEditorFea2.call(options).tableSelector) && editorExperiment('platform_editor_controls', 'variant1');
return {
name: 'table',
// Use getSharedState to store fullWidthEnabled and wasFullWidthModeEnabled to guarantee access
// to most up to date values - passing to createPluginState will not re-initialise the state
getSharedState: function getSharedState(editorState) {
var _tablePluginState$tab, _tableWidthResizingPl;
if (!editorState) {
return undefined;
}
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
var tablePluginState = pluginKey.getState(editorState);
var tableResizingPluginState = getFlexiResizingPlugin(editorState);
var tableWidthResizingPluginState = tableWidthPluginKey.getState(editorState);
var stickyHeadersState = stickyHeadersPluginKey.getState(editorState);
var stickyHeader = stickyHeadersState ? findStickyHeaderForTable(stickyHeadersState, tablePluginState === null || tablePluginState === void 0 ? void 0 : tablePluginState.tablePos) : undefined;
var dragAndDropState = dragAndDropPluginKey.getState(editorState);
var sizeSelectorPluginState = sizeSelectorPluginKey.getState(editorState);
var editorContentAreaHeightPluginState = editorContentAreaHeightPluginKey.getState(editorState);
var sharedStateInternal = {
isFullWidthModeEnabled: !!(options !== null && options !== void 0 && options.fullWidthEnabled),
wasFullWidthModeEnabled: !!(options !== null && options !== void 0 && options.wasFullWidthEnabled),
isMaxWidthModeEnabled: !!(options !== null && options !== void 0 && options.maxWidthEnabled),
wasMaxWidthModeEnabled: !!(options !== null && options !== void 0 && options.wasMaxWidthEnabled),
isHeaderRowEnabled: tablePluginState.isHeaderRowEnabled,
isHeaderColumnEnabled: tablePluginState.isHeaderColumnEnabled,
ordering: tablePluginState.ordering,
isResizing: !!(tableResizingPluginState !== null && tableResizingPluginState !== void 0 && tableResizingPluginState.dragging || tableWidthResizingPluginState !== null && tableWidthResizingPluginState !== void 0 && tableWidthResizingPluginState.resizing),
isTableResizing: tableWidthResizingPluginState === null || tableWidthResizingPluginState === void 0 ? void 0 : tableWidthResizingPluginState.resizing,
isInDanger: tablePluginState.isInDanger,
hoveredRows: tablePluginState.hoveredRows,
hoveredColumns: tablePluginState.hoveredColumns,
hoveredCell: tablePluginState.hoveredCell,
isTableHovered: tablePluginState.isTableHovered,
isWholeTableInDanger: tablePluginState.isWholeTableInDanger,
// IMPORTANT: Need to continue to pass tableNode to control re-renders
// TableComponent listens for node attribute changes to update colgroups
tableNode: tablePluginState.tableNode,
widthToWidest: tablePluginState.widthToWidest,
resizingTableLocalId: tableWidthResizingPluginState === null || tableWidthResizingPluginState === void 0 ? void 0 : tableWidthResizingPluginState.tableLocalId,
tableRef: (_tablePluginState$tab = tablePluginState === null || tablePluginState === void 0 ? void 0 : tablePluginState.tableRef) !== null && _tablePluginState$tab !== void 0 ? _tablePluginState$tab : undefined,
resizingTableRef: (_tableWidthResizingPl = tableWidthResizingPluginState === null || tableWidthResizingPluginState === void 0 ? void 0 : tableWidthResizingPluginState.tableRef) !== null && _tableWidthResizingPl !== void 0 ? _tableWidthResizingPl : undefined,
tablePos: tablePluginState.tablePos,
targetCellPosition: tablePluginState.targetCellPosition,
isContextualMenuOpen: tablePluginState.isContextualMenuOpen,
pluginConfig: tablePluginState.pluginConfig,
insertColumnButtonIndex: tablePluginState.insertColumnButtonIndex,
insertRowButtonIndex: tablePluginState.insertRowButtonIndex,
isDragAndDropEnabled: tablePluginState.isDragAndDropEnabled,
tableWrapperTarget: tablePluginState.tableWrapperTarget,
isCellMenuOpenByKeyboard: tablePluginState.isCellMenuOpenByKeyboard,
stickyHeader: stickyHeader,
dragMenuDirection: dragAndDropState === null || dragAndDropState === void 0 ? void 0 : dragAndDropState.dragMenuDirection,
dragMenuIndex: dragAndDropState === null || dragAndDropState === void 0 ? void 0 : dragAndDropState.dragMenuIndex,
isDragMenuOpen: dragAndDropState === null || dragAndDropState === void 0 ? void 0 : dragAndDropState.isDragMenuOpen,
isSizeSelectorOpen: sizeSelectorPluginState === null || sizeSelectorPluginState === void 0 ? void 0 : sizeSelectorPluginState.isSelectorOpen,
sizeSelectorTargetRef: sizeSelectorPluginState === null || sizeSelectorPluginState === void 0 ? void 0 : sizeSelectorPluginState.targetRef,
editorContentAreaHeight: expValEquals('platform_editor_table_sticky_header_improvements', 'cohort', 'test_with_overflow') && fg('platform_editor_table_sticky_header_patch_4') ? editorContentAreaHeightPluginState === null || editorContentAreaHeightPluginState === void 0 ? void 0 : editorContentAreaHeightPluginState.height : undefined
};
return sharedStateInternal;
},
actions: {
insertTable: function insertTable(analyticsPayload) {
return function (state, dispatch) {
var _options$tableOptions;
if (options !== null && options !== void 0 && (_options$tableOptions = options.tableOptions) !== null && _options$tableOptions !== void 0 && _options$tableOptions.allowNestedTables) {
return editorCommandToPMCommand(insertTableWithNestingSupport({
isTableScalingEnabled: options === null || options === void 0 ? void 0 : options.isTableScalingEnabled,
isTableAlignmentEnabled: options === null || options === void 0 ? void 0 : options.tableOptions.allowTableAlignment,
isFullWidthModeEnabled: options === null || options === void 0 ? void 0 : options.fullWidthEnabled,
isMaxWidthModeEnabled: options === null || options === void 0 ? void 0 : options.maxWidthEnabled,
isCommentEditor: options === null || options === void 0 ? void 0 : options.isCommentEditor,
isChromelessEditor: options === null || options === void 0 ? void 0 : options.isChromelessEditor,
isTableResizingEnabled: options === null || options === void 0 ? void 0 : options.tableOptions.allowTableResizing
}, api, analyticsPayload))(state, dispatch);
} else {
var _api$contentInsertion, _api$contentInsertion2;
var node = createTableWithWidth({
isTableScalingEnabled: options === null || options === void 0 ? void 0 : options.isTableScalingEnabled,
isTableAlignmentEnabled: options === null || options === void 0 ? void 0 : options.tableOptions.allowTableAlignment,
isFullWidthModeEnabled: options === null || options === void 0 ? void 0 : options.fullWidthEnabled,
isMaxWidthModeEnabled: options === null || options === void 0 ? void 0 : options.maxWidthEnabled,
isCommentEditor: options === null || options === void 0 ? void 0 : options.isCommentEditor,
isChromelessEditor: options === null || options === void 0 ? void 0 : options.isChromelessEditor,
isTableResizingEnabled: options === null || options === void 0 ? void 0 : options.tableOptions.allowTableResizing
})(state.schema);
return (_api$contentInsertion = api === null || api === void 0 || (_api$contentInsertion2 = api.contentInsertion) === null || _api$contentInsertion2 === void 0 || (_api$contentInsertion2 = _api$contentInsertion2.actions) === null || _api$contentInsertion2 === void 0 ? void 0 : _api$contentInsertion2.insert({
state: state,
dispatch: dispatch,
node: node,
options: {
selectNodeInserted: false,
analyticsPayload: _objectSpread(_objectSpread({}, analyticsPayload), {}, {
attributes: _objectSpread(_objectSpread({}, analyticsPayload.attributes), {}, {
localId: node.attrs.localId
})
})
}
})) !== null && _api$contentInsertion !== void 0 ? _api$contentInsertion : false;
}
};
}
},
commands: {
insertTableWithSize: function insertTableWithSize(rowsCount, colsCount, inputMethod) {
return insertTableWithNestingSupport({
isTableScalingEnabled: options === null || options === void 0 ? void 0 : options.isTableScalingEnabled,
isTableAlignmentEnabled: options === null || options === void 0 ? void 0 : options.tableOptions.allowTableAlignment,
isFullWidthModeEnabled: options === null || options === void 0 ? void 0 : options.fullWidthEnabled,
isMaxWidthModeEnabled: options === null || options === void 0 ? void 0 : options.maxWidthEnabled,
isCommentEditor: options === null || options === void 0 ? void 0 : options.isCommentEditor,
isChromelessEditor: options === null || options === void 0 ? void 0 : options.isChromelessEditor,
isTableResizingEnabled: options === null || options === void 0 ? void 0 : options.tableOptions.allowTableResizing,
createTableProps: {
rowsCount: rowsCount,
colsCount: colsCount
}
}, api, {
action: ACTION.INSERTED,
actionSubject: ACTION_SUBJECT.DOCUMENT,
actionSubjectId: ACTION_SUBJECT_ID.TABLE,
attributes: {
inputMethod: inputMethod !== null && inputMethod !== void 0 ? inputMethod : INPUT_METHOD.PICKER,
totalRowCount: rowsCount,
totalColumnCount: colsCount
},
eventType: EVENT_TYPE.TRACK
});
}
},
nodes: function nodes() {
var _options$tableOptions2, _options$getEditorFea3;
var _pluginConfig = pluginConfig(options === null || options === void 0 ? void 0 : options.tableOptions),
allowColumnResizing = _pluginConfig.allowColumnResizing;
// TODO: ED-25901 - We need to move this into a plugin config option so we don't accidentally enable nested nodes in Jira
var isNestingSupported = Boolean(options === null || options === void 0 || (_options$tableOptions2 = options.tableOptions) === null || _options$tableOptions2 === void 0 ? void 0 : _options$tableOptions2.allowNestedTables);
var isTableFixedColumnWidthsOptionEnabled = (fg('platform_editor_table_fixed_column_width_prop') ? options === null || options === void 0 ? void 0 : options.allowFixedColumnWidthOption : options === null || options === void 0 || (_options$getEditorFea3 = options.getEditorFeatureFlags) === null || _options$getEditorFea3 === void 0 ? void 0 : _options$getEditorFea3.call(options).tableWithFixedColumnWidthsOption) || false;
var shouldUseIncreasedScalingPercent = (options === null || options === void 0 ? void 0 : options.isTableScalingEnabled) && (isTableFixedColumnWidthsOptionEnabled || ( // When in comment editor, we need the scaling percent to be 40% while tableWithFixedColumnWidthsOption is not visible
options === null || options === void 0 ? void 0 : options.isCommentEditor));
var isTableScalingEnabled = options === null || options === void 0 ? void 0 : options.isTableScalingEnabled;
var isCommentEditor = options === null || options === void 0 ? void 0 : options.isCommentEditor;
var isChromelessEditor = options === null || options === void 0 ? void 0 : options.isChromelessEditor;
return isNestingSupported ? [{
name: 'table',
node: tableNodeSpecWithFixedToDOM({
allowColumnResizing: Boolean(allowColumnResizing),
tableResizingEnabled: Boolean(options === null || options === void 0 ? void 0 : options.tableOptions.allowTableResizing),
getEditorContainerWidth: defaultGetEditorContainerWidth,
isNestingSupported: isNestingSupported,
isTableScalingEnabled: isTableScalingEnabled,
shouldUseIncreasedScalingPercent: shouldUseIncreasedScalingPercent,
isCommentEditor: isCommentEditor,
isChromelessEditor: isChromelessEditor
})
}, {
name: 'tableHeader',
node: fg('platform_editor_adf_with_localid') ? tableHeaderWithNestedTableWithLocalId : tableHeaderWithNestedTable
}, {
name: 'tableRow',
node: fg('platform_editor_adf_with_localid') ? tableRowWithNestedTableWithLocalId : tableRowWithNestedTable
}, {
name: 'tableCell',
node: fg('platform_editor_adf_with_localid') ? tableCellWithNestedTableWithLocalId : tableCellWithNestedTable
}] : [{
name: 'table',
node: tableNodeSpecWithFixedToDOM({
allowColumnResizing: Boolean(allowColumnResizing),
tableResizingEnabled: Boolean(options === null || options === void 0 ? void 0 : options.tableOptions.allowTableResizing),
getEditorContainerWidth: defaultGetEditorContainerWidth,
isNestingSupported: isNestingSupported,
isTableScalingEnabled: isTableScalingEnabled,
shouldUseIncreasedScalingPercent: shouldUseIncreasedScalingPercent,
isCommentEditor: isCommentEditor,
isChromelessEditor: isChromelessEditor
})
}, {
name: 'tableHeader',
node: fg('platform_editor_adf_with_localid') ? tableHeaderWithLocalId : tableHeader
}, {
name: 'tableRow',
node: fg('platform_editor_adf_with_localid') ? tableRowWithLocalId : tableRow
}, {
name: 'tableCell',
node: fg('platform_editor_adf_with_localid') ? tableCellWithLocalId : tableCell
}];
},
pmPlugins: function pmPlugins() {
var plugins = [{
name: 'table',
plugin: function plugin(_ref2) {
var dispatchAnalyticsEvent = _ref2.dispatchAnalyticsEvent,
dispatch = _ref2.dispatch,
portalProviderAPI = _ref2.portalProviderAPI,
nodeViewPortalProviderAPI = _ref2.nodeViewPortalProviderAPI,
eventDispatcher = _ref2.eventDispatcher,
getIntl = _ref2.getIntl;
var _ref3 = options || {},
fullWidthEnabled = _ref3.fullWidthEnabled,
wasFullWidthEnabled = _ref3.wasFullWidthEnabled,
tableOptions = _ref3.tableOptions,
getEditorFeatureFlags = _ref3.getEditorFeatureFlags,
dragAndDropEnabled = _ref3.dragAndDropEnabled,
isTableScalingEnabled = _ref3.isTableScalingEnabled,
isCommentEditor = _ref3.isCommentEditor,
isChromelessEditor = _ref3.isChromelessEditor;
return createPlugin(dispatchAnalyticsEvent, dispatch, portalProviderAPI, nodeViewPortalProviderAPI, eventDispatcher, pluginConfig(tableOptions), defaultGetEditorContainerWidth, getEditorFeatureFlags || defaultGetEditorFeatureFlags, getIntl, fullWidthEnabled, wasFullWidthEnabled, dragAndDropEnabled, editorAnalyticsAPI, api, isTableScalingEnabled, shouldUseIncreasedScalingPercent, isCommentEditor, isChromelessEditor, options === null || options === void 0 ? void 0 : options.allowFixedColumnWidthOption);
}
}, {
name: 'tablePMColResizing',
plugin: function plugin(_ref4) {
var dispatch = _ref4.dispatch,
nodeViewPortalProviderAPI = _ref4.nodeViewPortalProviderAPI;
var _ref5 = options || {},
fullWidthEnabled = _ref5.fullWidthEnabled,
tableOptions = _ref5.tableOptions,
getEditorFeatureFlags = _ref5.getEditorFeatureFlags,
isTableScalingEnabled = _ref5.isTableScalingEnabled;
var _pluginConfig2 = pluginConfig(tableOptions),
allowColumnResizing = _pluginConfig2.allowColumnResizing;
return allowColumnResizing ? createFlexiResizingPlugin(dispatch, {
lastColumnResizable: !fullWidthEnabled
}, defaultGetEditorContainerWidth, getEditorFeatureFlags || defaultGetEditorFeatureFlags, api, nodeViewPortalProviderAPI, editorAnalyticsAPI, isTableScalingEnabled || false, !!(options !== null && options !== void 0 && options.isCommentEditor)) : undefined;
}
}, {
name: 'tableEditing',
plugin: function plugin() {
return createDecorationsPlugin();
}
},
// Needs to be lower priority than editor-tables.tableEditing
// plugin as it is currently swallowing backspace events inside tables
{
name: 'tableKeymap',
plugin: function plugin(_ref6) {
var getIntl = _ref6.getIntl,
nodeViewPortalProviderAPI = _ref6.nodeViewPortalProviderAPI;
var _ref7 = options || {},
dragAndDropEnabled = _ref7.dragAndDropEnabled,
_ref7$isTableScalingE = _ref7.isTableScalingEnabled,
isTableScalingEnabled = _ref7$isTableScalingE === void 0 ? false : _ref7$isTableScalingE,
_ref7$fullWidthEnable = _ref7.fullWidthEnabled,
fullWidthEnabled = _ref7$fullWidthEnable === void 0 ? false : _ref7$fullWidthEnable,
_ref7$isCommentEditor = _ref7.isCommentEditor,
isCommentEditor = _ref7$isCommentEditor === void 0 ? false : _ref7$isCommentEditor,
_ref7$isChromelessEdi = _ref7.isChromelessEditor,
isChromelessEditor = _ref7$isChromelessEdi === void 0 ? false : _ref7$isChromelessEdi,
tableOptions = _ref7.tableOptions;
return keymapPlugin(defaultGetEditorContainerWidth, api, nodeViewPortalProviderAPI, editorAnalyticsAPI, dragAndDropEnabled, isTableScalingEnabled, tableOptions === null || tableOptions === void 0 ? void 0 : tableOptions.allowTableAlignment, fullWidthEnabled, api, getIntl, isTableFixedColumnWidthsOptionEnabled, shouldUseIncreasedScalingPercent, isCommentEditor, isChromelessEditor, tableOptions === null || tableOptions === void 0 ? void 0 : tableOptions.allowTableResizing);
}
}, {
name: 'tableSelectionKeymap',
plugin: function plugin(_ref8) {
var getIntl = _ref8.getIntl;
return tableSelectionKeymapPlugin(api, getIntl);
}
}, {
name: 'tableEditing',
plugin: function plugin() {
var _ref9 = options || {},
dragAndDropEnabled = _ref9.dragAndDropEnabled;
return tableEditing({
reportFixedTable: function reportFixedTable(_ref0) {
var tr = _ref0.tr,
reason = _ref0.reason;
editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 || editorAnalyticsAPI.attachAnalyticsEvent({
action: TABLE_ACTION.FIXED,
actionSubject: ACTION_SUBJECT.TABLE,
actionSubjectId: null,
attributes: {
reason: reason
},
eventType: EVENT_TYPE.TRACK
})(tr);
},
dragAndDropEnabled: dragAndDropEnabled
});
}
}, {
name: 'tableStickyHeaders',
plugin: function plugin(_ref1) {
var dispatch = _ref1.dispatch;
return options && options.tableOptions.stickyHeaders ? createStickyHeadersPlugin(dispatch, function () {
return [];
}) : undefined;
}
}, {
name: 'tableDragAndDrop',
plugin: function plugin(_ref10) {
var dispatch = _ref10.dispatch;
return options !== null && options !== void 0 && options.dragAndDropEnabled ? createDragAndDropPlugin(dispatch, editorAnalyticsAPI, options === null || options === void 0 ? void 0 : options.isTableScalingEnabled, isTableFixedColumnWidthsOptionEnabled, options.isCommentEditor, api) : undefined;
}
}, {
name: 'tableViewModeSort',
plugin: function plugin(_ref11) {
var nodeViewPortalProviderAPI = _ref11.nodeViewPortalProviderAPI;
return api !== null && api !== void 0 && api.editorViewMode ? createViewModeSortPlugin(api, nodeViewPortalProviderAPI) : undefined;
}
}, {
name: 'tableLocalId',
plugin: function plugin(_ref12) {
var dispatch = _ref12.dispatch;
return !fg('platform_editor_adf_with_localid') ? createTableLocalIdPlugin(dispatch) : undefined;
}
}, {
name: 'tableWidth',
plugin: function plugin(_ref13) {
var _options$fullWidthEna, _options$maxWidthEnab, _options$isTableScali, _options$tableOptions3, _options$isCommentEdi;
var dispatchAnalyticsEvent = _ref13.dispatchAnalyticsEvent,
dispatch = _ref13.dispatch;
return options !== null && options !== void 0 && options.tableOptions.allowTableResizing ? createTableWidthPlugin(dispatch, dispatchAnalyticsEvent, (_options$fullWidthEna = options.fullWidthEnabled) !== null && _options$fullWidthEna !== void 0 ? _options$fullWidthEna : false, (_options$maxWidthEnab = options.maxWidthEnabled) !== null && _options$maxWidthEnab !== void 0 ? _options$maxWidthEnab : false, (_options$isTableScali = options.isTableScalingEnabled) !== null && _options$isTableScali !== void 0 ? _options$isTableScali : false, (_options$tableOptions3 = options.tableOptions.allowTableResizing) !== null && _options$tableOptions3 !== void 0 ? _options$tableOptions3 : false, (_options$isCommentEdi = options.isCommentEditor) !== null && _options$isCommentEdi !== void 0 ? _options$isCommentEdi : false) : undefined;
}
}, {
name: 'tableWidthInCommentFix',
plugin: function plugin(_ref14) {
var _options$tableOptions4;
var dispatch = _ref14.dispatch;
return options !== null && options !== void 0 && options.tableOptions.allowTableResizing && options !== null && options !== void 0 && options.isCommentEditor ? createTableWidthInCommentFixPlugin(dispatch, (_options$tableOptions4 = options.tableOptions.allowTableAlignment) !== null && _options$tableOptions4 !== void 0 ? _options$tableOptions4 : false) : undefined;
}
},
// TODO: ED-26961 - should be deprecated and eventually replaced with 'tableAnalyticsPlugin'
{
name: 'tableOverflowAnalyticsPlugin',
plugin: function plugin(_ref15) {
var _options$tableOptions5;
var dispatch = _ref15.dispatch,
dispatchAnalyticsEvent = _ref15.dispatchAnalyticsEvent;
return createTableOverflowAnalyticsPlugin(dispatch, dispatchAnalyticsEvent, (_options$tableOptions5 = options === null || options === void 0 ? void 0 : options.tableOptions.allowTableResizing) !== null && _options$tableOptions5 !== void 0 ? _options$tableOptions5 : false);
}
}, {
name: 'tableAnalyticsPlugin',
plugin: function plugin(_ref16) {
var dispatch = _ref16.dispatch,
dispatchAnalyticsEvent = _ref16.dispatchAnalyticsEvent;
return createTableAnalyticsPlugin(dispatch, dispatchAnalyticsEvent);
}
}, {
name: 'tableGetEditorViewReferencePlugin',
plugin: function plugin(_ref17) {
var dispatchAnalyticsEvent = _ref17.dispatchAnalyticsEvent;
return new SafePlugin({
view: function view(editorView) {
editorViewRef.current = editorView;
var rafID;
var ricID;
// send statistics about the widths of the tables on the page for alerting
// only send this event once, after the editorView is first initialised
var setTimeoutID = setTimeout(function () {
var requestIdleCallbackFn = function requestIdleCallbackFn() {
var _api$width$sharedStat2;
var editorWidth = api === null || api === void 0 || (_api$width$sharedStat2 = api.width.sharedState.currentState()) === null || _api$width$sharedStat2 === void 0 ? void 0 : _api$width$sharedStat2.width;
if (editorViewRef.current) {
if (editorWidth) {
var payload = getWidthInfoPayload(editorViewRef.current, editorWidth);
if (payload) {
dispatchAnalyticsEvent(payload);
}
}
if (fg('platform_editor_table_height_analytics_event')) {
var payloadHeight = getHeightInfoPayload(editorViewRef.current);
if (payloadHeight) {
dispatchAnalyticsEvent(payloadHeight);
}
}
}
};
if (window && typeof window.requestIdleCallback === 'function') {
ricID = window.requestIdleCallback(requestIdleCallbackFn);
} else if (window && typeof window.requestAnimationFrame === 'function') {
// requestIdleCallback is not supported in safari, fallback to requestAnimationFrame
rafID = window.requestAnimationFrame(requestIdleCallbackFn);
}
}, TABLE_WIDTH_INFO_TIMEOUT);
return {
destroy: function destroy() {
editorViewRef.current = null;
if (setTimeoutID) {
clearTimeout(setTimeoutID);
}
if (rafID) {
window.cancelAnimationFrame(rafID);
}
if (ricID) {
window.cancelIdleCallback(ricID);
}
}
};
}
});
}
}, {
name: 'tableSizeSelectorPlugin',
plugin: function plugin(_ref18) {
var dispatch = _ref18.dispatch;
return isTableSelectorEnabled ? createSizeSelectorPlugin(dispatch) : undefined;
}
}, {
name: 'editorContentAreaHeightPlugin',
plugin: function plugin() {
return expValEquals('platform_editor_table_sticky_header_improvements', 'cohort', 'test_with_overflow') && fg('platform_editor_table_sticky_header_patch_1') ? createContentAreaHeightPlugin() : undefined;
}
}];
if (!expValEquals('platform_editor_native_anchor_with_dnd', 'isEnabled', true) && expValEquals('platform_editor_table_sticky_header_improvements', 'cohort', 'test_with_overflow') && fg('platform_editor_table_sticky_header_patch_2')) {
plugins.push({
name: 'tableAnchorNames',
plugin: function plugin() {
return createTableAnchorNamesPlugin();
}
});
}
var browser = expValEquals('platform_editor_hydratable_ui', 'isEnabled', true) ? getBrowserInfo() : browserLegacy;
// Workaround for table element breaking issue caused by composition event with an inputType of deleteCompositionText.
// https://github.com/ProseMirror/prosemirror/issues/934
if (browser.safari) {
plugins.push({
name: 'tableSafariDeleteCompositionTextIssueWorkaround',
plugin: function plugin() {
return createTableSafariDeleteCompositionTextIssueWorkaroundPlugin();
}
});
}
return plugins;
},
contentComponent: function contentComponent(_ref19) {
var editorView = _ref19.editorView,
popupsMountPoint = _ref19.popupsMountPoint,
popupsBoundariesElement = _ref19.popupsBoundariesElement,
popupsScrollableElement = _ref19.popupsScrollableElement,
dispatchAnalyticsEvent = _ref19.dispatchAnalyticsEvent;
return /*#__PURE__*/React.createElement(ContentComponent, {
api: api,
editorView: editorView,
dispatchAnalyticsEvent: dispatchAnalyticsEvent,
options: options,
popupsMountPoint: popupsMountPoint,
popupsBoundariesElement: popupsBoundariesElement,
popupsScrollableElement: popupsScrollableElement,
defaultGetEditorContainerWidth: defaultGetEditorContainerWidth,
defaultGetEditorFeatureFlags: defaultGetEditorFeatureFlags,
isTableSelectorEnabled: isTableSelectorEnabled
});
},
pluginsOptions: {
quickInsert: function quickInsert(_ref20) {
var formatMessage = _ref20.formatMessage;
return [{
id: 'table',
title: formatMessage(messages.table),
description: formatMessage(messages.tableDescription),
keywords: ['cell', 'table'],
priority: 600,
keyshortcut: tooltip(toggleTable),
icon: function icon() {
return /*#__PURE__*/React.createElement(IconTable, null);
},
action: function action(insert, state) {
var _api$table, _options$tableOptions6;
if (isTableSelectorEnabled) {
var _tr = insert('');
_tr.setMeta(sizeSelectorPluginKey, {
isSelectorOpen: true
});
return _tr;
}
// see comment on tablesPlugin.getSharedState on usage
var tableState = api === null || api === void 0 || (_api$table = api.table) === null || _api$table === void 0 ? void 0 : _api$table.sharedState.currentState();
var tableNodeProps = {
isTableScalingEnabled: options === null || options === void 0 ? void 0 : options.isTableScalingEnabled,
isTableAlignmentEnabled: options === null || options === void 0 ? void 0 : options.tableOptions.allowTableAlignment,
isFullWidthModeEnabled: tableState === null || tableState === void 0 ? void 0 : tableState.isFullWidthModeEnabled,
isMaxWidthModeEnabled: tableState === null || tableState === void 0 ? void 0 : tableState.isMaxWidthModeEnabled,
isCommentEditor: options === null || options === void 0 ? void 0 : options.isCommentEditor,
isChromelessEditor: options === null || options === void 0 ? void 0 : options.isChromelessEditor,
isTableResizingEnabled: options === null || options === void 0 ? void 0 : options.tableOptions.allowTableResizing
};
var tableNode = createTableWithWidth(tableNodeProps)(state.schema);
var tr = state.tr;
// If the cursor is inside a table
if (hasParentNodeOfType(state.schema.nodes.table)(state.selection) && options !== null && options !== void 0 && (_options$tableOptions6 = options.tableOptions) !== null && _options$tableOptions6 !== void 0 && _options$tableOptions6.allowNestedTables) {
// If trying to nest deeper than one level, we insert the table after the top table
if (getParentOfTypeCount(state.schema.nodes.table)(state.selection.$from) > 1) {
// Nesting is too deep insert table after the top parent table
var positionAfterTopTable = getPositionAfterTopParentNodeOfType(state.schema.nodes.table)(state.selection.$from);
tr = safeInsert(tableNode, positionAfterTopTable)(tr);
tr.scrollIntoView();
} else {
// Table can be nested in parent table
tableNode = createTableWithWidth(_objectSpread(_objectSpread({}, tableNodeProps), {}, {
isNestedTable: true
}))(state.schema);
tr = insert(tableNode);
}
} else {
tr = insert(tableNode);
}
editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 || editorAnalyticsAPI.attachAnalyticsEvent({
action: ACTION.INSERTED,
actionSubject: ACTION_SUBJECT.DOCUMENT,
actionSubjectId: ACTION_SUBJECT_ID.TABLE,
attributes: {
inputMethod: INPUT_METHOD.QUICK_INSERT,
localId: tableNode.attrs.localId
},
eventType: EVENT_TYPE.TRACK
})(tr);
return tr;
}
}];
},
floatingToolbar: getToolbarConfig(defaultGetEditorContainerWidth, api, editorAnalyticsAPI, function () {
return editorViewRef.current;
}, options, isTableFixedColumnWidthsOptionEnabled, shouldUseIncreasedScalingPercent)(pluginConfig(options === null || options === void 0 ? void 0 : options.tableOptions))
},
usePluginHook: function usePluginHook(_ref21) {
var editorView = _ref21.editorView;
var _useSharedPluginState = useSharedPluginStateWithSelector(api, ['editorViewMode'], function (states) {
var _states$editorViewMod;
return {
mode: (_states$editorViewMod = states.editorViewModeState) === null || _states$editorViewMod === void 0 ? void 0 : _states$editorViewMod.mode
};
}),
mode = _useSharedPluginState.mode;
useEffect(function () {
var state = editorView.state,
dispatch = editorView.dispatch;
var tr = state.tr;
tr.setMeta('viewModeState', mode);
if (dispatch) {
dispatch(tr);
}
}, [editorView, mode]);
}
};
};
export default tablePlugin;