@atlaskit/editor-plugin-expand
Version:
Expand plugin for @atlaskit/editor-core
247 lines (241 loc) • 10.3 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; }
import { SetAttrsStep } from '@atlaskit/adf-schema/steps';
import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD, MODE, PLATFORMS } from '@atlaskit/editor-common/analytics';
import { GapCursorSelection, Side } from '@atlaskit/editor-common/selection';
import { expandClassNames } from '@atlaskit/editor-common/styles';
import { findExpand } from '@atlaskit/editor-common/transforms';
import { createWrapSelectionTransaction } from '@atlaskit/editor-common/utils';
import { Selection, TextSelection } from '@atlaskit/editor-prosemirror/state';
import { safeInsert } from '@atlaskit/editor-prosemirror/utils';
import { findTable } from '@atlaskit/editor-tables/utils';
import { fg } from '@atlaskit/platform-feature-flags';
import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
import { isNestedInExpand } from '../utils';
import { createCommand } from './pm-plugins/plugin-factory';
export var setExpandRef = function setExpandRef(ref) {
return createCommand({
type: 'SET_EXPAND_REF',
data: {
ref: ref
}
}, function (tr) {
return tr.setMeta('addToHistory', false);
});
};
export var deleteExpandAtPos = function deleteExpandAtPos(editorAnalyticsAPI) {
return function (expandNodePos, expandNode) {
return function (state, dispatch) {
if (!expandNode || isNaN(expandNodePos)) {
return false;
}
var payload = {
action: ACTION.DELETED,
actionSubject: expandNode.type === state.schema.nodes.expand ? ACTION_SUBJECT.EXPAND : ACTION_SUBJECT.NESTED_EXPAND,
attributes: {
inputMethod: INPUT_METHOD.FLOATING_TB
},
eventType: 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(Selection.near(resolvedPos, -1));
}
}
dispatch(tr);
}
return true;
};
};
};
export var deleteExpand = function deleteExpand(editorAnalyticsAPI) {
return function (state, dispatch) {
var expandNode = findExpand(state);
if (!expandNode) {
return false;
}
return deleteExpandAtPos(editorAnalyticsAPI)(expandNode.pos, expandNode.node)(state, dispatch);
};
};
export var updateExpandTitle = function updateExpandTitle(_ref) {
var title = _ref.title,
nodeType = _ref.nodeType,
pos = _ref.pos,
__livePage = _ref.__livePage;
return function (state, dispatch) {
var node = state.doc.nodeAt(pos);
if (node && node.type === nodeType && dispatch) {
var tr = state.tr;
if (__livePage) {
tr.step(new SetAttrsStep(pos, _objectSpread(_objectSpread({}, node.attrs), {}, {
title: title
})));
} else {
tr.setNodeMarkup(pos, node.type, _objectSpread(_objectSpread({}, node.attrs), {}, {
title: title
}), node.marks);
}
dispatch(tr);
}
return true;
};
};
export var toggleExpandExpanded = function toggleExpandExpanded(_ref2) {
var editorAnalyticsAPI = _ref2.editorAnalyticsAPI,
pos = _ref2.pos,
nodeType = _ref2.nodeType,
__livePage = _ref2.__livePage;
return function (state, dispatch) {
var node = state.doc.nodeAt(pos);
if (node && node.type === nodeType && dispatch) {
var tr = state.tr;
var isExpandedNext = !node.attrs.__expanded;
if (__livePage) {
tr.step(new SetAttrsStep(pos, _objectSpread(_objectSpread({}, node.attrs), {}, {
__expanded: isExpandedNext
})));
} else {
tr.setNodeMarkup(pos, node.type, _objectSpread(_objectSpread({}, node.attrs), {}, {
__expanded: isExpandedNext
}), node.marks);
}
// 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 (__livePage ? isExpandedNext === true : isExpandedNext === false && findExpand(state)) {
tr.setSelection(new GapCursorSelection(tr.doc.resolve(pos + node.nodeSize), Side.RIGHT));
}
// log when people open/close expands
// TODO: ED-8523 - make platform/mode global attributes?
var payload = {
action: ACTION.TOGGLE_EXPAND,
actionSubject: nodeType === state.schema.nodes.expand ? ACTION_SUBJECT.EXPAND : ACTION_SUBJECT.NESTED_EXPAND,
attributes: {
platform: PLATFORMS.WEB,
mode: MODE.EDITOR,
expanded: __livePage ? !isExpandedNext : isExpandedNext
},
eventType: EVENT_TYPE.TRACK
};
// `isRemote` meta prevents this step from being
// sync'd between sessions in synchrony collab edit
tr.setMeta('isRemote', true);
editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 || editorAnalyticsAPI.attachAnalyticsEvent(payload)(tr);
dispatch(tr);
}
return true;
};
};
// Creates either an expand or a nestedExpand node based on the current selection
export var createExpandNode = function createExpandNode(state) {
var _state$schema$nodes = state.schema.nodes,
expand = _state$schema$nodes.expand,
nestedExpand = _state$schema$nodes.nestedExpand;
var isSelectionInTable = !!findTable(state.selection);
var isSelectionInExpand = isNestedInExpand(state);
var expandType = isSelectionInTable || isSelectionInExpand ? nestedExpand : expand;
return expandType.createAndFill({});
};
export var insertExpandWithInputMethod = function insertExpandWithInputMethod(editorAnalyticsAPI) {
return function (inputMethod) {
return function (state, dispatch) {
var expandNode = createExpandNode(state);
if (!expandNode) {
return false;
}
var tr = state.selection.empty ? safeInsert(expandNode)(state.tr).scrollIntoView() : createWrapSelectionTransaction({
state: state,
type: expandNode.type
});
var resolvedInputMethod = fg('platform_editor_element_browser_analytic') ? inputMethod : INPUT_METHOD.QUICK_INSERT;
var payload = {
action: ACTION.INSERTED,
actionSubject: ACTION_SUBJECT.DOCUMENT,
actionSubjectId: (expandNode === null || expandNode === void 0 ? void 0 : expandNode.type) === state.schema.nodes.expand ? ACTION_SUBJECT_ID.EXPAND : ACTION_SUBJECT_ID.NESTED_EXPAND,
attributes: {
inputMethod: resolvedInputMethod
},
eventType: EVENT_TYPE.TRACK
};
if (dispatch && expandNode) {
editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 || editorAnalyticsAPI.attachAnalyticsEvent(payload)(tr);
dispatch(tr);
}
return true;
};
};
};
export var insertExpand = function insertExpand(editorAnalyticsAPI) {
return function (state, dispatch) {
return insertExpandWithInputMethod(editorAnalyticsAPI)(INPUT_METHOD.INSERT_MENU)(state, dispatch);
};
};
export var 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;
};
};
export var 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 = expValEquals('platform_editor_vc90_transition_expand_icon', 'isEnabled', true) ? expand.querySelector(".".concat(expandClassNames.iconButton)) : expand.querySelector(".".concat(expandClassNames.iconContainer));
if (iconContainer && iconContainer.focus) {
var tr = state.tr;
var pos = state.selection.from;
tr.setSelection(new TextSelection(tr.doc.resolve(pos)));
if (dispatch) {
dispatch(tr);
}
editorView === null || editorView === void 0 || editorView.dom.blur();
iconContainer.focus();
return true;
}
return false;
};
};
// Used to clear any node or cell selection when expand title is focused
export var setSelectionInsideExpand = function setSelectionInsideExpand(expandPos) {
return function (_state, dispatch, editorView) {
if (editorView) {
if (!editorView.hasFocus()) {
editorView.focus();
}
var sel = Selection.findFrom(editorView.state.doc.resolve(expandPos), 1, true);
if (sel && dispatch) {
dispatch(editorView.state.tr.setSelection(sel));
}
return true;
}
return false;
};
};
export var toggleExpandWithMatch = function toggleExpandWithMatch(_selection) {
return function (_ref3) {
var _tr = _ref3.tr;
// this action exists so that we can keep the plugin types consistent across the
// the legacy expand plugin and the single player expand plugin until
// we will remove the legacy expand plugin
return null;
};
};