@atlaskit/editor-plugin-table
Version:
Table plugin for the @atlaskit/editor
95 lines (92 loc) • 4.29 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; }
/*
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.
*/
import rafSchedule from 'raf-schd';
import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
import { PluginKey } from '@atlaskit/editor-prosemirror/state';
import { akEditorDefaultLayoutWidth } from '@atlaskit/editor-shared-styles';
import { ALIGN_START } from './utils/alignment';
export var pluginKey = new PluginKey('tableWidthInCommentFixPlugin');
var getPluginState = function getPluginState(state) {
return state && pluginKey.getState(state);
};
var createPlugin = function createPlugin(dispatch, isTableAlignmentEnabled) {
return new 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;
rafSchedule(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 === akEditorDefaultLayoutWidth && layout === 'default') {
tableWidthAndLayoutUpdated = true;
tr.setNodeMarkup(pos, undefined, _objectSpread(_objectSpread({}, node.attrs), {}, {
width: null,
layout: isTableAlignmentEnabled ? 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
}));
}
};
}
});
};
export { createPlugin };