@atlaskit/editor-plugin-table
Version:
Table plugin for the @atlaskit/editor
99 lines (96 loc) • 4.63 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.pluginKey = exports.createPlugin = void 0;
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _rafSchd = _interopRequireDefault(require("raf-schd"));
var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
var _state = require("@atlaskit/editor-prosemirror/state");
var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
var _alignment = require("./utils/alignment");
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; } /*
Existing legacy tables in Comment editor have set attributes:
- width = 760
- layout = 'default'.
When "Support Table in Comment" FF is enabled, table resizing (and table alignment in Confluence comments) is turned.
It results in (ED-24795) all exising tables being set 760px width. Instead they all should inherit width from
the editor container until a user decided to edit their old comment and set a custom table width themselves.
This plugin exists to fix the described issue. It ensures that once "Support Table in Comment" FF turned on,
existing tables continue to inherit the width of editor container and are 'left-aligned' by default.
*/
var pluginKey = exports.pluginKey = new _state.PluginKey('tableWidthInCommentFixPlugin');
var getPluginState = function getPluginState(state) {
return state && pluginKey.getState(state);
};
var createPlugin = exports.createPlugin = function createPlugin(dispatch, isTableAlignmentEnabled) {
return new _safePlugin.SafePlugin({
key: pluginKey,
state: {
init: function init() {
return {
documentHasLoadedOnce: false
};
},
apply: function apply(tr, pluginState) {
var meta = tr.getMeta(pluginKey);
if (meta) {
var keys = Object.keys(meta);
var changed = keys.some(function (key) {
return pluginState[key] !== meta[key];
});
if (changed) {
var newState = _objectSpread(_objectSpread({}, pluginState), meta);
dispatch(pluginKey, newState);
return newState;
}
}
return pluginState;
}
},
view: function view() {
return {
update: function update(editorView) {
var state = editorView.state;
var pluginState = getPluginState(state);
if (!pluginState) {
return;
}
var documentHasLoadedOnce = pluginState.documentHasLoadedOnce;
if (documentHasLoadedOnce) {
return;
}
var table = state.schema.nodes.table;
(0, _rafSchd.default)(function () {
var tr = editorView.state.tr;
var tableWidthAndLayoutUpdated = false;
editorView.state.doc.descendants(function (node, pos) {
var isTable = node.type === table;
var width = node.attrs.width;
var layout = node.attrs.layout;
if (isTable && width === _editorSharedStyles.akEditorDefaultLayoutWidth && layout === 'default') {
tableWidthAndLayoutUpdated = true;
tr.setNodeMarkup(pos, undefined, _objectSpread(_objectSpread({}, node.attrs), {}, {
width: null,
layout: isTableAlignmentEnabled ? _alignment.ALIGN_START : 'default'
}));
return false;
}
// Returning false here because don't need to change nested tables
return false;
});
if (tableWidthAndLayoutUpdated) {
tr.setMeta('addToHistory', false);
editorView.dispatch(tr);
}
})();
editorView.dispatch(state.tr.setMeta(pluginKey, {
documentHasLoadedOnce: true
}));
}
};
}
});
};