@atlaskit/editor-plugin-table
Version:
Table plugin for the @atlaskit/editor
94 lines (92 loc) • 4.57 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.pluginKey = exports.createPlugin = void 0;
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _uuid = _interopRequireDefault(require("uuid"));
var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
var _styles = require("@atlaskit/editor-common/styles");
var _state = require("@atlaskit/editor-prosemirror/state");
var _view = require("@atlaskit/editor-prosemirror/view");
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
// eslint-disable-next-line @atlaskit/platform/prefer-crypto-random-uuid
var ObjHash = /*#__PURE__*/function () {
function ObjHash() {
(0, _classCallCheck2.default)(this, ObjHash);
}
return (0, _createClass2.default)(ObjHash, null, [{
key: "getForNode",
value: function getForNode(node) {
if (this.cache.has(node)) {
return this.cache.get(node) || '';
}
// eslint-disable-next-line @atlaskit/platform/prefer-crypto-random-uuid
var uniqueId = (0, _uuid.default)();
this.cache.set(node, uniqueId);
return uniqueId;
}
}]);
}();
(0, _defineProperty2.default)(ObjHash, "cache", new WeakMap());
var getNodeAnchor = function getNodeAnchor(node) {
var handleId = ObjHash.getForNode(node);
return "--table-".concat(node.type.name, "-").concat(handleId);
};
var createTableAnchorDecorations = function createTableAnchorDecorations(state) {
var decs = [];
var headerRowId;
state.doc.nodesBetween(0, state.doc.content.size, function (node, pos, parent, index) {
var _parent$attrs;
var isTableHeader = node.type.name === 'tableHeader';
var isTableRow = node.type.name === 'tableRow';
var isParentTableRow = (parent === null || parent === void 0 ? void 0 : parent.type.name) === 'tableRow';
var isParentTableHeaderRow = (parent === null || parent === void 0 ? void 0 : parent.type.name) === 'tableRow' && headerRowId && (parent === null || parent === void 0 || (_parent$attrs = parent.attrs) === null || _parent$attrs === void 0 ? void 0 : _parent$attrs.localId) === headerRowId;
var shouldAddDecorationToHeader = (0, _expValEquals.expValEquals)('platform_editor_table_sticky_header_patch_9', 'isEnabled', true) ? isParentTableHeaderRow && isTableHeader : isTableHeader;
var isFirstRow = isTableRow && index === 0;
if (isFirstRow) {
headerRowId = node.attrs.localId;
}
// only apply to header cells and the first row of a table, for performance reasons
if (isFirstRow || shouldAddDecorationToHeader) {
var anchorName = getNodeAnchor(node);
var shouldAddAnchorNameInDecoration = !(0, _styles.isCSSAttrAnchorSupported)() && (0, _styles.isCSSAnchorSupported)() && (0, _platformFeatureFlags.fg)('platform_editor_table_sticky_header_patch_8');
var attributes = {
'data-node-anchor': anchorName,
style: "anchor-name: ".concat(anchorName, ";")
};
decs.push(_view.Decoration.node(pos, pos + node.nodeSize, shouldAddAnchorNameInDecoration ? attributes : {
'data-node-anchor': anchorName
}));
}
// only decend if there is a possible table row or table header node after the current node, for performance reasons
return (0, _expValEquals.expValEquals)('platform_editor_table_sticky_header_patch_9', 'isEnabled', true) ? !(isTableHeader || isParentTableHeaderRow) : !(isTableHeader || isParentTableRow);
});
return _view.DecorationSet.create(state.doc, decs);
};
var pluginKey = exports.pluginKey = new _state.PluginKey('tableAnchorNamesPlugin');
var createPlugin = exports.createPlugin = function createPlugin() {
return new _safePlugin.SafePlugin({
state: {
init: function init(_config, state) {
return createTableAnchorDecorations(state);
},
apply: function apply(tr, decorationSet, _, newState) {
if (tr.docChanged) {
return createTableAnchorDecorations(newState);
}
return decorationSet;
}
},
key: pluginKey,
props: {
decorations: function decorations(state) {
return pluginKey.getState(state) || _view.DecorationSet.empty;
}
}
});
};