@atlaskit/editor-plugin-table
Version:
Table plugin for the @atlaskit/editor
630 lines (623 loc) • 42.5 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _react = _interopRequireWildcard(require("react"));
var _adfSchema = require("@atlaskit/adf-schema");
var _analytics = require("@atlaskit/editor-common/analytics");
var _browser = require("@atlaskit/editor-common/browser");
var _hooks = require("@atlaskit/editor-common/hooks");
var _icons = require("@atlaskit/editor-common/icons");
var _keymaps = require("@atlaskit/editor-common/keymaps");
var _messages = require("@atlaskit/editor-common/messages");
var _nesting = require("@atlaskit/editor-common/nesting");
var _preset = require("@atlaskit/editor-common/preset");
var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
var _utils = require("@atlaskit/editor-prosemirror/utils");
var _pmPlugins = require("@atlaskit/editor-tables/pm-plugins");
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
var _toDOM = require("./nodeviews/toDOM");
var _plugin = require("./pm-plugins/analytics/plugin");
var _insert = require("./pm-plugins/commands/insert");
var _createPluginConfig = require("./pm-plugins/create-plugin-config");
var _plugin2 = require("./pm-plugins/decorations/plugin");
var _plugin3 = require("./pm-plugins/drag-and-drop/plugin");
var _pluginKey = require("./pm-plugins/drag-and-drop/plugin-key");
var _editorContentAreaHeight = require("./pm-plugins/editor-content-area-height");
var _keymap = require("./pm-plugins/keymap");
var _main = require("./pm-plugins/main");
var _pluginKey2 = require("./pm-plugins/plugin-key");
var _safariDeleteCompositionTextIssueWorkaround = require("./pm-plugins/safari-delete-composition-text-issue-workaround");
var _plugin4 = require("./pm-plugins/sticky-headers/plugin");
var _pluginKey3 = require("./pm-plugins/sticky-headers/plugin-key");
var _util = require("./pm-plugins/sticky-headers/util");
var _tableAnalytics = require("./pm-plugins/table-analytics");
var _plugin5 = require("./pm-plugins/table-anchor-names/plugin");
var _tableLocalId = require("./pm-plugins/table-local-id");
var _plugin6 = require("./pm-plugins/table-resizing/plugin");
var _pluginFactory = require("./pm-plugins/table-resizing/plugin-factory");
var _tableSelectionKeymap = require("./pm-plugins/table-selection-keymap");
var _tableSizeSelector = require("./pm-plugins/table-size-selector");
var _tableWidth = require("./pm-plugins/table-width");
var _tableWidthInCommentFix = require("./pm-plugins/table-width-in-comment-fix");
var _analytics2 = require("./pm-plugins/utils/analytics");
var _create = require("./pm-plugins/utils/create");
var _viewModeSort = require("./pm-plugins/view-mode-sort");
var _ContentComponent = require("./ui/ContentComponent");
var _toolbar = require("./ui/toolbar");
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
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) { (0, _defineProperty2.default)(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; }
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) || (0, _platformFeatureFlags.fg)('platform_editor_enable_table_dnd'),
isTableScalingEnabled: (config === null || config === void 0 ? void 0 : config.isTableScalingEnabled) || (0, _platformFeatureFlags.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 = (0, _platformFeatureFlags.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) && (0, _experiments.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 = _pluginKey2.pluginKey.getState(editorState);
var tableResizingPluginState = (0, _pluginFactory.getPluginState)(editorState);
var tableWidthResizingPluginState = _tableWidth.pluginKey.getState(editorState);
var stickyHeadersState = _pluginKey3.pluginKey.getState(editorState);
var stickyHeader = stickyHeadersState ? (0, _util.findStickyHeaderForTable)(stickyHeadersState, tablePluginState === null || tablePluginState === void 0 ? void 0 : tablePluginState.tablePos) : undefined;
var dragAndDropState = _pluginKey.pluginKey.getState(editorState);
var sizeSelectorPluginState = _tableSizeSelector.pluginKey.getState(editorState);
var editorContentAreaHeightPluginState = _editorContentAreaHeight.pluginKey.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: (0, _expValEquals.expValEquals)('platform_editor_table_sticky_header_improvements', 'cohort', 'test_with_overflow') && (0, _platformFeatureFlags.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 (0, _preset.editorCommandToPMCommand)((0, _insert.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 = (0, _create.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 (0, _insert.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: _analytics.ACTION.INSERTED,
actionSubject: _analytics.ACTION_SUBJECT.DOCUMENT,
actionSubjectId: _analytics.ACTION_SUBJECT_ID.TABLE,
attributes: {
inputMethod: inputMethod !== null && inputMethod !== void 0 ? inputMethod : _analytics.INPUT_METHOD.PICKER,
totalRowCount: rowsCount,
totalColumnCount: colsCount
},
eventType: _analytics.EVENT_TYPE.TRACK
});
}
},
nodes: function nodes() {
var _options$tableOptions2, _options$getEditorFea3;
var _pluginConfig = (0, _createPluginConfig.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 = ((0, _platformFeatureFlags.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: (0, _toDOM.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: (0, _platformFeatureFlags.fg)('platform_editor_adf_with_localid') ? _adfSchema.tableHeaderWithNestedTableWithLocalId : _adfSchema.tableHeaderWithNestedTable
}, {
name: 'tableRow',
node: (0, _platformFeatureFlags.fg)('platform_editor_adf_with_localid') ? _adfSchema.tableRowWithNestedTableWithLocalId : _adfSchema.tableRowWithNestedTable
}, {
name: 'tableCell',
node: (0, _platformFeatureFlags.fg)('platform_editor_adf_with_localid') ? _adfSchema.tableCellWithNestedTableWithLocalId : _adfSchema.tableCellWithNestedTable
}] : [{
name: 'table',
node: (0, _toDOM.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: (0, _platformFeatureFlags.fg)('platform_editor_adf_with_localid') ? _adfSchema.tableHeaderWithLocalId : _adfSchema.tableHeader
}, {
name: 'tableRow',
node: (0, _platformFeatureFlags.fg)('platform_editor_adf_with_localid') ? _adfSchema.tableRowWithLocalId : _adfSchema.tableRow
}, {
name: 'tableCell',
node: (0, _platformFeatureFlags.fg)('platform_editor_adf_with_localid') ? _adfSchema.tableCellWithLocalId : _adfSchema.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 (0, _main.createPlugin)(dispatchAnalyticsEvent, dispatch, portalProviderAPI, nodeViewPortalProviderAPI, eventDispatcher, (0, _createPluginConfig.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 = (0, _createPluginConfig.pluginConfig)(tableOptions),
allowColumnResizing = _pluginConfig2.allowColumnResizing;
return allowColumnResizing ? (0, _plugin6.createPlugin)(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 (0, _plugin2.createPlugin)();
}
},
// 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 (0, _keymap.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 (0, _tableSelectionKeymap.tableSelectionKeymapPlugin)(api, getIntl);
}
}, {
name: 'tableEditing',
plugin: function plugin() {
var _ref9 = options || {},
dragAndDropEnabled = _ref9.dragAndDropEnabled;
return (0, _pmPlugins.tableEditing)({
reportFixedTable: function reportFixedTable(_ref0) {
var tr = _ref0.tr,
reason = _ref0.reason;
editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 || editorAnalyticsAPI.attachAnalyticsEvent({
action: _analytics.TABLE_ACTION.FIXED,
actionSubject: _analytics.ACTION_SUBJECT.TABLE,
actionSubjectId: null,
attributes: {
reason: reason
},
eventType: _analytics.EVENT_TYPE.TRACK
})(tr);
},
dragAndDropEnabled: dragAndDropEnabled
});
}
}, {
name: 'tableStickyHeaders',
plugin: function plugin(_ref1) {
var dispatch = _ref1.dispatch;
return options && options.tableOptions.stickyHeaders ? (0, _plugin4.createPlugin)(dispatch, function () {
return [];
}) : undefined;
}
}, {
name: 'tableDragAndDrop',
plugin: function plugin(_ref10) {
var dispatch = _ref10.dispatch;
return options !== null && options !== void 0 && options.dragAndDropEnabled ? (0, _plugin3.createPlugin)(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 ? (0, _viewModeSort.createPlugin)(api, nodeViewPortalProviderAPI) : undefined;
}
}, {
name: 'tableLocalId',
plugin: function plugin(_ref12) {
var dispatch = _ref12.dispatch;
return !(0, _platformFeatureFlags.fg)('platform_editor_adf_with_localid') ? (0, _tableLocalId.createPlugin)(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 ? (0, _tableWidth.createPlugin)(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 ? (0, _tableWidthInCommentFix.createPlugin)(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 (0, _tableAnalytics.createPlugin)(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 (0, _plugin.createPlugin)(dispatch, dispatchAnalyticsEvent);
}
}, {
name: 'tableGetEditorViewReferencePlugin',
plugin: function plugin(_ref17) {
var dispatchAnalyticsEvent = _ref17.dispatchAnalyticsEvent;
return new _safePlugin.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 = (0, _analytics2.getWidthInfoPayload)(editorViewRef.current, editorWidth);
if (payload) {
dispatchAnalyticsEvent(payload);
}
}
if ((0, _platformFeatureFlags.fg)('platform_editor_table_height_analytics_event')) {
var payloadHeight = (0, _analytics2.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 ? (0, _tableSizeSelector.createPlugin)(dispatch) : undefined;
}
}, {
name: 'editorContentAreaHeightPlugin',
plugin: function plugin() {
return (0, _expValEquals.expValEquals)('platform_editor_table_sticky_header_improvements', 'cohort', 'test_with_overflow') && (0, _platformFeatureFlags.fg)('platform_editor_table_sticky_header_patch_1') ? (0, _editorContentAreaHeight.createPlugin)() : undefined;
}
}];
if (!(0, _expValEquals.expValEquals)('platform_editor_native_anchor_with_dnd', 'isEnabled', true) && (0, _expValEquals.expValEquals)('platform_editor_table_sticky_header_improvements', 'cohort', 'test_with_overflow') && (0, _platformFeatureFlags.fg)('platform_editor_table_sticky_header_patch_2')) {
plugins.push({
name: 'tableAnchorNames',
plugin: function plugin() {
return (0, _plugin5.createPlugin)();
}
});
}
var browser = (0, _expValEquals.expValEquals)('platform_editor_hydratable_ui', 'isEnabled', true) ? (0, _browser.getBrowserInfo)() : _browser.browser;
// 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 (0, _safariDeleteCompositionTextIssueWorkaround.createPlugin)();
}
});
}
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.default.createElement(_ContentComponent.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.toolbarInsertBlockMessages.table),
description: formatMessage(_messages.toolbarInsertBlockMessages.tableDescription),
keywords: ['cell', 'table'],
priority: 600,
keyshortcut: (0, _keymaps.tooltip)(_keymaps.toggleTable),
icon: function icon() {
return /*#__PURE__*/_react.default.createElement(_icons.IconTable, null);
},
action: function action(insert, state) {
var _api$table, _options$tableOptions6;
if (isTableSelectorEnabled) {
var _tr = insert('');
_tr.setMeta(_tableSizeSelector.pluginKey, {
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 = (0, _create.createTableWithWidth)(tableNodeProps)(state.schema);
var tr = state.tr;
// If the cursor is inside a table
if ((0, _utils.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 ((0, _nesting.getParentOfTypeCount)(state.schema.nodes.table)(state.selection.$from) > 1) {
// Nesting is too deep insert table after the top parent table
var positionAfterTopTable = (0, _nesting.getPositionAfterTopParentNodeOfType)(state.schema.nodes.table)(state.selection.$from);
tr = (0, _utils.safeInsert)(tableNode, positionAfterTopTable)(tr);
tr.scrollIntoView();
} else {
// Table can be nested in parent table
tableNode = (0, _create.createTableWithWidth)(_objectSpread(_objectSpread({}, tableNodeProps), {}, {
isNestedTable: true
}))(state.schema);
tr = insert(tableNode);
}
} else {
tr = insert(tableNode);
}
editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 || editorAnalyticsAPI.attachAnalyticsEvent({
action: _analytics.ACTION.INSERTED,
actionSubject: _analytics.ACTION_SUBJECT.DOCUMENT,
actionSubjectId: _analytics.ACTION_SUBJECT_ID.TABLE,
attributes: {
inputMethod: _analytics.INPUT_METHOD.QUICK_INSERT,
localId: tableNode.attrs.localId
},
eventType: _analytics.EVENT_TYPE.TRACK
})(tr);
return tr;
}
}];
},
floatingToolbar: (0, _toolbar.getToolbarConfig)(defaultGetEditorContainerWidth, api, editorAnalyticsAPI, function () {
return editorViewRef.current;
}, options, isTableFixedColumnWidthsOptionEnabled, shouldUseIncreasedScalingPercent)((0, _createPluginConfig.pluginConfig)(options === null || options === void 0 ? void 0 : options.tableOptions))
},
usePluginHook: function usePluginHook(_ref21) {
var editorView = _ref21.editorView;
var _useSharedPluginState = (0, _hooks.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;
(0, _react.useEffect)(function () {
var state = editorView.state,
dispatch = editorView.dispatch;
var tr = state.tr;
tr.setMeta('viewModeState', mode);
if (dispatch) {
dispatch(tr);
}
}, [editorView, mode]);
}
};
};
var _default = exports.default = tablePlugin;