@atlaskit/editor-plugin-expand
Version:
Expand plugin for @atlaskit/editor-core
289 lines (283 loc) • 13.4 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.wrapSelectionAndSetExpandedState = exports.updateExpandTitle = exports.toggleExpandWithMatch = exports.toggleExpandExpanded = exports.setSelectionInsideExpand = exports.insertExpandWithInputMethod = exports.insertExpand = exports.focusTitle = exports.focusIcon = exports.deleteExpandAtPos = exports.deleteExpand = exports.createExpandNode = void 0;
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _v = _interopRequireDefault(require("uuid/v4"));
var _steps = require("@atlaskit/adf-schema/steps");
var _analytics = require("@atlaskit/editor-common/analytics");
var _expand = require("@atlaskit/editor-common/expand");
var _selection = require("@atlaskit/editor-common/selection");
var _styles = require("@atlaskit/editor-common/styles");
var _transforms = require("@atlaskit/editor-common/transforms");
var _utils = require("@atlaskit/editor-common/utils");
var _state2 = require("@atlaskit/editor-prosemirror/state");
var _utils2 = require("@atlaskit/editor-prosemirror/utils");
var _utils3 = require("@atlaskit/editor-tables/utils");
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
var _utils4 = require("../utils");
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; } // eslint-disable-next-line @atlaskit/platform/prefer-crypto-random-uuid -- Use crypto.randomUUID instead
// Creates either an expand or a nestedExpand node based on the current selection
var createExpandNode = exports.createExpandNode = function createExpandNode(state) {
var setExpandedState = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
var addLocalId = arguments.length > 2 ? arguments[2] : undefined;
var _state$schema$nodes = state.schema.nodes,
expand = _state$schema$nodes.expand,
nestedExpand = _state$schema$nodes.nestedExpand,
paragraph = _state$schema$nodes.paragraph;
var isSelectionInTable = !!(0, _utils3.findTable)(state.selection);
var isSelectionInExpand = (0, _utils4.isNestedInExpand)(state);
var expandType = isSelectionInTable || isSelectionInExpand ? nestedExpand : expand;
var expandNode = (0, _platformFeatureFlags.fg)('platform_editor_adf_with_localid') ? expandType.createAndFill(addLocalId ? {
// eslint-disable-next-line @atlaskit/platform/prefer-crypto-random-uuid -- Use crypto.randomUUID instead
localId: (0, _v.default)()
} : {},
// eslint-disable-next-line @atlaskit/platform/prefer-crypto-random-uuid -- Use crypto.randomUUID instead
paragraph.createAndFill(addLocalId ? {
localId: (0, _v.default)()
} : {})) : expandType.createAndFill({});
if (setExpandedState) {
// Ignored via go/ees005
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
_expand.expandedState.set(expandNode, true);
}
return expandNode;
};
/**
* When cleaning up platform_editor_adf_with_localid we can reuse this function
* in insertExpandWithInputMethod.
*/
var wrapSelectionAndSetExpandedState = exports.wrapSelectionAndSetExpandedState = function wrapSelectionAndSetExpandedState(state, node) {
var tr = (0, _utils.createWrapSelectionTransaction)({
state: state,
type: node.type,
nodeAttributes: node.attrs
});
var wrapperNode = (0, _utils2.findParentNodeOfType)(node.type)(tr.selection);
if (wrapperNode) {
_expand.expandedState.set(wrapperNode.node, true);
}
return tr;
};
var insertExpandWithInputMethod = exports.insertExpandWithInputMethod = function insertExpandWithInputMethod(api) {
return function (inputMethod) {
return function (state, dispatch) {
var expandNode = createExpandNode(state, false, !!(api !== null && api !== void 0 && api.localId));
if (!expandNode) {
return false;
}
var tr;
if (state.selection.empty) {
tr = (0, _utils2.safeInsert)(expandNode)(state.tr).scrollIntoView();
_expand.expandedState.set(expandNode, true);
} else {
tr = (0, _utils.createWrapSelectionTransaction)(_objectSpread({
state: state,
type: expandNode.type
}, (0, _platformFeatureFlags.fg)('platform_editor_adf_with_localid') && {
nodeAttributes: expandNode.attrs
}));
var wrapperNode = (0, _utils2.findParentNodeOfType)(expandNode.type)(tr.selection);
if (wrapperNode) {
_expand.expandedState.set(wrapperNode.node, true);
}
}
var payload = {
action: _analytics.ACTION.INSERTED,
actionSubject: _analytics.ACTION_SUBJECT.DOCUMENT,
actionSubjectId: (expandNode === null || expandNode === void 0 ? void 0 : expandNode.type) === state.schema.nodes.expand ? _analytics.ACTION_SUBJECT_ID.EXPAND : _analytics.ACTION_SUBJECT_ID.NESTED_EXPAND,
attributes: {
inputMethod: inputMethod
},
eventType: _analytics.EVENT_TYPE.TRACK
};
if (dispatch) {
var _api$analytics;
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(payload)(tr);
dispatch(tr);
}
return true;
};
};
};
var insertExpand = exports.insertExpand = function insertExpand(api) {
return function (state, dispatch) {
return insertExpandWithInputMethod(api)(_analytics.INPUT_METHOD.INSERT_MENU)(state, dispatch);
};
};
var deleteExpand = exports.deleteExpand = function deleteExpand(editorAnalyticsAPI) {
return function (state, dispatch) {
var expandNode = (0, _transforms.findExpand)(state);
if (!expandNode) {
return false;
}
return deleteExpandAtPos(editorAnalyticsAPI)(expandNode.pos, expandNode.node)(state, dispatch);
};
};
var deleteExpandAtPos = exports.deleteExpandAtPos = function deleteExpandAtPos(editorAnalyticsAPI) {
return function (expandNodePos, expandNode) {
return function (state, dispatch) {
if (!expandNode || isNaN(expandNodePos)) {
return false;
}
var payload = {
action: _analytics.ACTION.DELETED,
actionSubject: expandNode.type === state.schema.nodes.expand ? _analytics.ACTION_SUBJECT.EXPAND : _analytics.ACTION_SUBJECT.NESTED_EXPAND,
attributes: {
inputMethod: _analytics.INPUT_METHOD.FLOATING_TB
},
eventType: _analytics.EVENT_TYPE.TRACK
};
if (expandNode && dispatch) {
var tr = state.tr;
tr.delete(expandNodePos, expandNodePos + expandNode.nodeSize);
editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 || editorAnalyticsAPI.attachAnalyticsEvent(payload)(tr);
if (expandNode.type === state.schema.nodes.nestedExpand) {
var resolvedPos = tr.doc.resolve(expandNodePos + 1);
if (resolvedPos) {
tr.setSelection(_state2.Selection.near(resolvedPos, -1));
}
}
dispatch(tr);
}
return true;
};
};
};
// Used to clear any node or cell selection when expand title is focused
var setSelectionInsideExpand = exports.setSelectionInsideExpand = function setSelectionInsideExpand(expandPos) {
return function (_state, dispatch, editorView) {
if (editorView) {
if (!editorView.hasFocus()) {
editorView.focus();
}
var sel = _state2.Selection.findFrom(editorView.state.doc.resolve(expandPos), 1, true);
if (sel && dispatch) {
dispatch(editorView.state.tr.setSelection(sel));
}
return true;
}
return false;
};
};
var toggleExpandExpanded = exports.toggleExpandExpanded = function toggleExpandExpanded(_ref) {
var editorAnalyticsAPI = _ref.editorAnalyticsAPI,
pos = _ref.pos,
node = _ref.node;
return function (state, dispatch) {
if (node && dispatch) {
var _expandedState$get;
var tr = state.tr;
var expanded = (_expandedState$get = _expand.expandedState.get(node)) !== null && _expandedState$get !== void 0 ? _expandedState$get : false;
var isExpandedNext = !expanded;
_expand.expandedState.set(node, isExpandedNext);
// If we're going to collapse the expand and our cursor is currently inside
// Move to a right gap cursor, if the toolbar is interacted (or an API),
// it will insert below rather than inside (which will be invisible).
if (isExpandedNext === true) {
tr.setSelection(new _selection.GapCursorSelection(tr.doc.resolve(pos + node.nodeSize), _selection.Side.RIGHT));
}
// log when people open/close expands
// TODO: ED-8523 - make platform/mode global attributes?
var payload = {
action: _analytics.ACTION.TOGGLE_EXPAND,
actionSubject: node.type === state.schema.nodes.expand ? _analytics.ACTION_SUBJECT.EXPAND : _analytics.ACTION_SUBJECT.NESTED_EXPAND,
attributes: {
platform: _analytics.PLATFORMS.WEB,
mode: _analytics.MODE.EDITOR,
expanded: isExpandedNext
},
eventType: _analytics.EVENT_TYPE.TRACK
};
tr.setMeta('scrollIntoView', false);
editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 || editorAnalyticsAPI.attachAnalyticsEvent(payload)(tr);
dispatch(tr);
}
return true;
};
};
var updateExpandTitle = exports.updateExpandTitle = function updateExpandTitle(_ref2) {
var title = _ref2.title,
nodeType = _ref2.nodeType,
pos = _ref2.pos;
return function (state, dispatch) {
var node = state.doc.nodeAt(pos);
if (node && node.type === nodeType && dispatch) {
var tr = state.tr;
tr.step(new _steps.SetAttrsStep(pos, _objectSpread(_objectSpread({}, node.attrs), {}, {
title: title
})));
dispatch(tr);
}
return true;
};
};
var focusTitle = exports.focusTitle = function focusTitle(pos) {
return function (state, dispatch, editorView) {
if (editorView) {
var dom = editorView.domAtPos(pos);
var expandWrapper = dom.node.parentElement;
if (expandWrapper) {
setSelectionInsideExpand(pos)(state, dispatch, editorView);
var input = expandWrapper.querySelector('input');
if (input) {
input.focus();
return true;
}
}
}
return false;
};
};
var focusIcon = exports.focusIcon = function focusIcon(expand) {
return function (state, dispatch, editorView) {
if (!(expand instanceof HTMLElement)) {
return false;
}
// TODO: ED-29205 - During platform_editor_vc90_transition_expand_icon cleanup, rename `iconContainer` to `iconButton`.
var iconContainer = (0, _expValEquals.expValEquals)('platform_editor_vc90_transition_expand_icon', 'isEnabled', true) ? expand.querySelector(".".concat(_styles.expandClassNames.iconButton)) : expand.querySelector(".".concat(_styles.expandClassNames.iconContainer));
if (iconContainer && iconContainer.focus) {
var tr = state.tr;
var pos = state.selection.from;
tr.setSelection(new _state2.TextSelection(tr.doc.resolve(pos)));
if (dispatch) {
dispatch(tr);
}
editorView === null || editorView === void 0 || editorView.dom.blur();
iconContainer.focus();
return true;
}
return false;
};
};
var toggleExpandWithMatch = exports.toggleExpandWithMatch = function toggleExpandWithMatch(selection) {
return function (_ref3) {
var tr = _ref3.tr;
var _tr$doc$type$schema$n = tr.doc.type.schema.nodes,
expand = _tr$doc$type$schema$n.expand,
nestedExpand = _tr$doc$type$schema$n.nestedExpand;
// if match is inside a nested expand, open the nested expand
var nestedExpandNode = (0, _utils2.findParentNodeOfType)(nestedExpand)(selection);
if (nestedExpandNode) {
var _expandedState$get2;
var expanded = (_expandedState$get2 = _expand.expandedState.get(nestedExpandNode.node)) !== null && _expandedState$get2 !== void 0 ? _expandedState$get2 : false;
if (!expanded) {
_expand.expandedState.set(nestedExpandNode.node, true);
}
}
// if match is (also) inside an expand, open the expand
var expandNode = (0, _utils2.findParentNodeOfType)(expand)(selection);
if (expandNode) {
var _expandedState$get3;
var _expanded = (_expandedState$get3 = _expand.expandedState.get(expandNode.node)) !== null && _expandedState$get3 !== void 0 ? _expandedState$get3 : false;
if (!_expanded) {
_expand.expandedState.set(expandNode.node, true);
}
}
return tr;
};
};