@atlaskit/editor-plugin-table
Version:
Table plugin for the @atlaskit/editor
149 lines (145 loc) • 7.71 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.isTableInContentMode = exports.isContentModeSupported = exports.hasTableBeenResized = exports.applyMeasuredWidthToSelectedTable = exports.applyMeasuredWidthToAllTables = void 0;
var _analytics = require("@atlaskit/editor-common/analytics");
var _styles = require("@atlaskit/editor-common/styles");
var _utils = require("@atlaskit/editor-tables/utils");
var _expValEqualsNoExposure = require("@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure");
var _colgroup = require("../table-resizing/utils/colgroup");
var _contentMode = require("../transforms/content-mode");
var _alignment = require("./alignment");
var isTableInContentMode = exports.isTableInContentMode = function isTableInContentMode(_ref) {
var allowColumnResizing = _ref.allowColumnResizing,
allowTableResizing = _ref.allowTableResizing,
isFullPageEditor = _ref.isFullPageEditor,
isTableNested = _ref.isTableNested,
node = _ref.node;
if (!(0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_table_fit_to_content_auto_convert', 'isEnabled', true)) {
return false;
}
if (!node || isTableNested) {
return false;
}
return isContentModeSupported({
allowColumnResizing: allowColumnResizing,
allowTableResizing: allowTableResizing,
isFullPageEditor: isFullPageEditor
}) && !hasTableBeenResized(node) && node.attrs.layout === _alignment.ALIGN_START;
};
var isContentModeSupported = exports.isContentModeSupported = function isContentModeSupported(_ref2) {
var allowColumnResizing = _ref2.allowColumnResizing,
allowTableResizing = _ref2.allowTableResizing,
isFullPageEditor = _ref2.isFullPageEditor;
return allowColumnResizing && allowTableResizing && isFullPageEditor;
};
var hasTableBeenResized = exports.hasTableBeenResized = function hasTableBeenResized(node) {
return node.attrs.width !== null || (0, _colgroup.hasTableColumnBeenResized)(node);
};
/**
* Iterates all top-level tables in the document, and for those in content mode,
* measures rendered column widths and sets colwidth + table width attributes
* in a single batched transaction.
*/
var applyMeasuredWidthToAllTables = exports.applyMeasuredWidthToAllTables = function applyMeasuredWidthToAllTables(view, pluginInjectionApi) {
var _view$state = view.state,
doc = _view$state.doc,
schema = _view$state.schema;
var tr = view.state.tr;
var table = schema.nodes.table;
var modified = false;
var measuredTables = [];
// modify only top-level tables
doc.forEach(function (node, offset) {
if (node.type !== table || hasTableBeenResized(node) && node.attrs.layout !== _alignment.ALIGN_START) {
return;
}
var domNode = view.domAtPos(offset + 1).node;
var tableWrapper = domNode instanceof HTMLElement ? domNode.closest(".".concat(_styles.TableSharedCssClassName.TABLE_VIEW_CONTENT_WRAP)) : null;
var tableRef = tableWrapper === null || tableWrapper === void 0 ? void 0 : tableWrapper.querySelector('table');
if (!tableRef) {
return;
}
measuredTables.push({
node: node,
offset: offset,
measurement: (0, _contentMode.getTableMeasurement)(tableRef)
});
});
measuredTables.forEach(function (_ref3) {
var node = _ref3.node,
offset = _ref3.offset,
measurement = _ref3.measurement;
tr = (0, _contentMode.applyTableMeasurement)(tr, node, measurement, offset);
modified = true;
});
if (modified) {
var _pluginInjectionApi$a, _pluginInjectionApi$w, _pluginInjectionApi$w2;
pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a === void 0 || (_pluginInjectionApi$a = _pluginInjectionApi$a.actions) === null || _pluginInjectionApi$a === void 0 || _pluginInjectionApi$a.attachAnalyticsEvent({
action: _analytics.TABLE_ACTION.FIT_TO_CONTENT_AUTO_CONVERTED,
actionSubject: _analytics.ACTION_SUBJECT.TABLE,
actionSubjectId: null,
eventType: _analytics.EVENT_TYPE.TRACK,
attributes: {
editorContainerWidth: (_pluginInjectionApi$w = pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$w2 = pluginInjectionApi.width) === null || _pluginInjectionApi$w2 === void 0 || (_pluginInjectionApi$w2 = _pluginInjectionApi$w2.sharedState.currentState()) === null || _pluginInjectionApi$w2 === void 0 ? void 0 : _pluginInjectionApi$w2.width) !== null && _pluginInjectionApi$w !== void 0 ? _pluginInjectionApi$w : 0,
totalTablesResized: measuredTables.length,
measurements: measuredTables.map(function (_ref4) {
var measurement = _ref4.measurement;
return {
tableWidth: measurement.tableWidth,
totalColumnCount: measurement.colWidths.length
};
})
}
})(tr);
view.dispatch(tr.setMeta('addToHistory', false));
}
};
var applyMeasuredWidthToSelectedTable = exports.applyMeasuredWidthToSelectedTable = function applyMeasuredWidthToSelectedTable(view, api) {
var _api$analytics, _api$width$sharedStat, _api$width;
var tableObject = (0, _utils.findTable)(view.state.selection);
if (!tableObject) {
return;
}
var node = tableObject.node,
pos = tableObject.pos;
var tableState = api === null || api === void 0 ? void 0 : api.table.sharedState.currentState();
if (!(tableState !== null && tableState !== void 0 && tableState.tableRef)) {
return;
}
var tableRef = tableState.tableRef;
// Instead of dispatching a transaction to "strip widths" and then waiting
// for a rAF to measure natural column widths, instea directly update the DOM elements and
// take a measurement.
var cols = Array.from(tableRef.querySelectorAll(':scope > colgroup > col'));
var contentWrap = tableRef.closest(".".concat(_styles.TableSharedCssClassName.TABLE_VIEW_CONTENT_WRAP));
var resizerContainer = contentWrap === null || contentWrap === void 0 ? void 0 : contentWrap.querySelector(".".concat(_styles.TableSharedCssClassName.TABLE_RESIZER_CONTAINER));
var resizerItem = resizerContainer === null || resizerContainer === void 0 ? void 0 : resizerContainer.querySelector('.resizer-item.display-handle');
tableRef.style.width = '';
tableRef.style.tableLayout = 'auto';
cols.forEach(function (col) {
return col.style.width = '';
});
if (resizerContainer) {
resizerContainer.style.width = 'max-content';
resizerContainer.style.setProperty('--ak-editor-table-width', 'max-content');
}
if (resizerItem) {
resizerItem.style.width = 'max-content';
}
var measurement = (0, _contentMode.getTableMeasurement)(tableRef);
var tr = (0, _contentMode.applyTableMeasurement)(view.state.tr, node, measurement, pos);
api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 || (_api$analytics = _api$analytics.actions) === null || _api$analytics === void 0 || _api$analytics.attachAnalyticsEvent({
action: _analytics.TABLE_ACTION.FIT_TO_CONTENT_ON_DEMAND,
actionSubject: _analytics.ACTION_SUBJECT.TABLE,
actionSubjectId: null,
eventType: _analytics.EVENT_TYPE.TRACK,
attributes: {
editorContainerWidth: (_api$width$sharedStat = api === null || api === void 0 || (_api$width = api.width) === null || _api$width === void 0 || (_api$width = _api$width.sharedState.currentState()) === null || _api$width === void 0 ? void 0 : _api$width.width) !== null && _api$width$sharedStat !== void 0 ? _api$width$sharedStat : 0,
tableWidth: measurement.tableWidth,
totalColumnCount: measurement.colWidths.length
}
})(tr);
view.dispatch(tr);
};