@atlaskit/editor-plugin-expand
Version:
Expand plugin for @atlaskit/editor-core
710 lines (705 loc) • 31.5 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.ExpandNodeView = void 0;
exports.default = _default;
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 _react = _interopRequireDefault(require("react"));
var _v = _interopRequireDefault(require("uuid/v4"));
var _w3cKeyname = require("w3c-keyname");
var _expand = require("@atlaskit/editor-common/expand");
var _selection = require("@atlaskit/editor-common/selection");
var _styles = require("@atlaskit/editor-common/styles");
var _utils = require("@atlaskit/editor-common/utils");
var _model = require("@atlaskit/editor-prosemirror/model");
var _state = require("@atlaskit/editor-prosemirror/state");
var _prosemirrorHistory = require("@atlaskit/prosemirror-history");
var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
var _renderExpandButton = require("../../ui/renderExpandButton");
var _commands = require("../commands");
var _ExpandButton = require("../ui/ExpandButton");
var _NodeView = require("../ui/NodeView");
var _utils2 = require("../utils");
// eslint-disable-next-line @atlaskit/platform/prefer-crypto-random-uuid -- Use crypto.randomUUID instead
var ExpandNodeView = exports.ExpandNodeView = /*#__PURE__*/function () {
function ExpandNodeView(_node, view, getPos, getIntl, isMobile, selectNearNode, api, nodeViewPortalProviderAPI) {
var _this = this,
_api$editorDisabled,
_this$api8;
var allowInteractiveExpand = arguments.length > 8 && arguments[8] !== undefined ? arguments[8] : true;
var __livePage = arguments.length > 9 && arguments[9] !== undefined ? arguments[9] : false;
var cleanUpEditorDisabledOnChange = arguments.length > 10 ? arguments[10] : undefined;
var isExpanded = arguments.length > 11 && arguments[11] !== undefined ? arguments[11] : {
expanded: false
};
(0, _classCallCheck2.default)(this, ExpandNodeView);
(0, _defineProperty2.default)(this, "allowInteractiveExpand", true);
(0, _defineProperty2.default)(this, "isMobile", false);
(0, _defineProperty2.default)(this, "focusTitle", function () {
if (_this.input) {
var _this$view = _this.view,
state = _this$view.state,
dispatch = _this$view.dispatch;
if (_this.selectNearNode) {
var tr = _this.selectNearNode({
selectionRelativeToNode: _selection.RelativeSelectionPos.Start
})(state);
if (dispatch) {
dispatch(tr);
}
}
var pos = _this.getPos();
if (typeof pos === 'number') {
(0, _commands.setSelectionInsideExpand)(pos)(state, dispatch, _this.view);
}
_this.input.focus();
}
});
(0, _defineProperty2.default)(this, "handleIconKeyDown", function (event) {
switch ((0, _w3cKeyname.keyName)(event)) {
case 'Tab':
event.preventDefault();
_this.focusTitle();
break;
case 'Enter':
event.preventDefault();
_this.handleClick(event);
break;
}
});
(0, _defineProperty2.default)(this, "handleClick", function (event) {
var pos = _this.getPos();
if (typeof pos !== 'number') {
return;
}
// Ignored via go/ees005
// eslint-disable-next-line @atlaskit/editor/no-as-casting
var target = event.target;
if ((0, _utils.closestElement)(target, ".".concat(_styles.expandClassNames.icon))) {
var _this$api;
if (!_this.allowInteractiveExpand) {
return;
}
event.stopPropagation();
// We blur the editorView, to prevent any keyboard showing on mobile
// When we're interacting with the expand toggle
if (_this.view.dom instanceof HTMLElement) {
_this.view.dom.blur();
}
(0, _commands.toggleExpandExpanded)({
editorAnalyticsAPI: (_this$api = _this.api) === null || _this$api === void 0 || (_this$api = _this$api.analytics) === null || _this$api === void 0 ? void 0 : _this$api.actions,
pos: pos,
node: _this.node
})(_this.view.state, _this.view.dispatch);
_this.updateExpandToggleIcon(_this.node);
_this.updateDisplayStyle(_this.node);
return;
}
if (target === _this.input) {
event.stopPropagation();
_this.focusTitle();
return;
}
});
(0, _defineProperty2.default)(this, "handleInput", function (event) {
var pos = _this.getPos();
if (typeof pos !== 'number') {
return;
}
var target = event.target;
if (target === _this.input) {
event.stopPropagation();
var _this$view2 = _this.view,
state = _this$view2.state,
dispatch = _this$view2.dispatch;
(0, _commands.updateExpandTitle)({
title: target.value,
pos: pos,
nodeType: _this.node.type
})(state, dispatch);
}
});
(0, _defineProperty2.default)(this, "handleFocus", function (event) {
event.stopImmediatePropagation();
});
(0, _defineProperty2.default)(this, "handleInputFocus", function () {
var _this$api2;
_this.decorationCleanup = (_this$api2 = _this.api) === null || _this$api2 === void 0 || (_this$api2 = _this$api2.selectionMarker) === null || _this$api2 === void 0 || (_this$api2 = _this$api2.actions) === null || _this$api2 === void 0 ? void 0 : _this$api2.hideDecoration();
});
(0, _defineProperty2.default)(this, "handleBlur", function () {
var _this$decorationClean;
(_this$decorationClean = _this.decorationCleanup) === null || _this$decorationClean === void 0 || _this$decorationClean.call(_this);
});
(0, _defineProperty2.default)(this, "handleTitleKeydown", function (event) {
// Handle Ctrl+Shift+H to select the expand node for drag handle
// Note: If changing this implementation in singlePlayer expand, please also update the implementation in legacyExpand
if ((0, _expValEquals.expValEquals)('platform_editor_dnd_accessibility_fixes_expand', 'isEnabled', true) && (event.ctrlKey || event.metaKey) && event.shiftKey && (event.key === 'H' || event.key === 'h')) {
event.preventDefault();
var pos = _this.getPos();
if (typeof pos === 'number') {
// Blur the input first to remove focus from the title
if (_this.input) {
_this.input.blur();
}
// Use requestAnimationFrame to ensure blur completes before setting selection
requestAnimationFrame(function () {
var _this$api3;
var state = _this.view.state;
_this.view.focus();
(_this$api3 = _this.api) === null || _this$api3 === void 0 || _this$api3.core.actions.execute(function (_ref) {
var tr = _ref.tr;
tr.setSelection(_state.NodeSelection.create(state.doc, pos));
// Show the drag handle on the selected expand node
var node = state.doc.nodeAt(pos);
if (node) {
// Find the anchor name from the DOM
var dom = _this.view.nodeDOM(pos);
if (dom instanceof HTMLElement) {
var anchorName = (0, _expValEquals.expValEquals)('platform_editor_native_anchor_with_dnd', 'isEnabled', true) ? dom.getAttribute('data-node-anchor') : dom.getAttribute('data-drag-handler-anchor-name');
// Only proceed if we found a valid anchor name
if (anchorName) {
var _this$api4;
var command = (_this$api4 = _this.api) === null || _this$api4 === void 0 || (_this$api4 = _this$api4.blockControls) === null || _this$api4 === void 0 ? void 0 : _this$api4.commands.showDragHandleAt(pos, anchorName, node.type.name, {
isFocused: true
});
if (command) {
return command({
tr: tr
});
}
}
}
}
return null;
});
});
}
return;
}
switch ((0, _w3cKeyname.keyName)(event)) {
case 'Enter':
_this.toggleExpand();
break;
case 'Tab':
case 'ArrowDown':
_this.moveToOutsideOfTitle(event);
break;
case 'ArrowRight':
_this.handleArrowRightFromTitle(event);
break;
case 'ArrowLeft':
_this.handleArrowLeftFromTitle(event);
break;
case 'ArrowUp':
if ((0, _expValEquals.expValEquals)('platform_editor_lovability_navigation_fixes', 'isEnabled', true)) {
_this.moveToPreviousLine(event);
} else {
_this.setLeftGapCursor(event);
}
break;
case 'Backspace':
_this.deleteEmptyExpand();
break;
}
// 'Ctrl-y', 'Mod-Shift-z');
if (event.ctrlKey && event.key === 'y' || (event.ctrlKey || event.metaKey) && event.shiftKey && event.key === 'z') {
_this.handleRedoFromTitle(event);
return;
}
// 'Mod-z'
if ((event.ctrlKey || event.metaKey) && event.key === 'z') {
_this.handleUndoFromTitle(event);
return;
}
if ((0, _expValEquals.expValEquals)('platform_editor_breakout_resizing', 'isEnabled', true)) {
if ((event.ctrlKey || event.metaKey) && event.altKey && (event.code === 'BracketLeft' || event.code === 'BracketRight')) {
_this.view.dispatchEvent(new KeyboardEvent('keydown', {
key: event.key,
code: event.code,
metaKey: event.metaKey,
ctrlKey: event.ctrlKey,
altKey: event.altKey
}));
}
}
});
(0, _defineProperty2.default)(this, "deleteEmptyExpand", function () {
var state = _this.view.state;
var expandNode = _this.node;
if (!_this.input) {
return;
}
var _this$input = _this.input,
selectionStart = _this$input.selectionStart,
selectionEnd = _this$input.selectionEnd;
if (selectionStart !== selectionEnd || selectionStart !== 0) {
return;
}
if (expandNode && (0, _utils.isEmptyNode)(state.schema)(expandNode)) {
var _this$api5;
(0, _commands.deleteExpand)((_this$api5 = _this.api) === null || _this$api5 === void 0 || (_this$api5 = _this$api5.analytics) === null || _this$api5 === void 0 ? void 0 : _this$api5.actions)(state, _this.view.dispatch);
}
});
(0, _defineProperty2.default)(this, "toggleExpand", function () {
var pos = _this.getPos();
if (typeof pos !== 'number') {
return;
}
if (_this.allowInteractiveExpand) {
var _this$api6;
var _this$view3 = _this.view,
state = _this$view3.state,
dispatch = _this$view3.dispatch;
(0, _commands.toggleExpandExpanded)({
editorAnalyticsAPI: (_this$api6 = _this.api) === null || _this$api6 === void 0 || (_this$api6 = _this$api6.analytics) === null || _this$api6 === void 0 ? void 0 : _this$api6.actions,
pos: pos,
node: _this.node
})(state, dispatch);
_this.updateExpandToggleIcon(_this.node);
_this.updateDisplayStyle(_this.node);
}
});
(0, _defineProperty2.default)(this, "moveToOutsideOfTitle", function (event) {
event.preventDefault();
var _this$view4 = _this.view,
state = _this$view4.state,
dispatch = _this$view4.dispatch;
var expandPos = _this.getPos();
if (typeof expandPos !== 'number') {
return;
}
var pos = expandPos;
if (_this.isCollapsed()) {
pos = expandPos + _this.node.nodeSize;
}
var resolvedPos = state.doc.resolve(pos);
if (!resolvedPos) {
return;
}
if (_this.isCollapsed() && resolvedPos.nodeAfter && ['expand', 'nestedExpand'].indexOf(resolvedPos.nodeAfter.type.name) > -1) {
return _this.setRightGapCursor(event);
}
var sel = _state.Selection.findFrom(resolvedPos, 1, true);
if (sel) {
// If the input has focus, ProseMirror doesn't
// Give PM focus back before changing our selection
_this.view.focus();
dispatch(state.tr.setSelection(sel));
}
});
(0, _defineProperty2.default)(this, "isCollapsed", function () {
return !_expand.expandedState.get(_this.node);
});
(0, _defineProperty2.default)(this, "setRightGapCursor", function (event) {
if (!_this.input) {
return;
}
var pos = _this.getPos();
if (typeof pos !== 'number') {
return;
}
var _this$input2 = _this.input,
value = _this$input2.value,
selectionStart = _this$input2.selectionStart,
selectionEnd = _this$input2.selectionEnd;
var selectionStartExists = selectionStart !== null && selectionStart !== undefined;
var selectionEndExists = selectionEnd !== null && selectionEnd !== undefined;
var selectionStartInsideTitle = selectionStartExists && selectionStart >= 0 && selectionStart <= value.length;
var selectionEndInsideTitle = selectionEndExists && selectionEnd >= 0 && selectionEnd <= value.length;
if (selectionStartInsideTitle && selectionEndInsideTitle) {
var _this$view5 = _this.view,
state = _this$view5.state,
dispatch = _this$view5.dispatch;
event.preventDefault();
_this.view.focus();
dispatch(state.tr.setSelection(new _selection.GapCursorSelection(state.doc.resolve(_this.node.nodeSize + pos), _selection.Side.RIGHT)));
}
});
(0, _defineProperty2.default)(this, "moveToPreviousLine", function (event) {
if (!_this.input) {
return;
}
var pos = _this.getPos();
if (typeof pos !== 'number') {
return;
}
var _this$input3 = _this.input,
selectionStart = _this$input3.selectionStart,
selectionEnd = _this$input3.selectionEnd;
if (selectionStart === selectionEnd && selectionStart === 0) {
event.preventDefault();
var _this$view6 = _this.view,
state = _this$view6.state,
dispatch = _this$view6.dispatch;
var resolvedPos = state.doc.resolve(pos);
if (!resolvedPos) {
return;
}
if (resolvedPos.pos === 0) {
_this.setLeftGapCursor(event);
return;
}
var sel = _state.Selection.findFrom(resolvedPos, -1);
if (sel) {
_this.view.focus();
dispatch(state.tr.setSelection(sel));
}
}
});
(0, _defineProperty2.default)(this, "setLeftGapCursor", function (event) {
if (!_this.input) {
return;
}
var pos = _this.getPos();
if (typeof pos !== 'number') {
return;
}
var _this$input4 = _this.input,
selectionStart = _this$input4.selectionStart,
selectionEnd = _this$input4.selectionEnd;
if (selectionStart === selectionEnd && selectionStart === 0) {
event.preventDefault();
var _this$view7 = _this.view,
state = _this$view7.state,
dispatch = _this$view7.dispatch;
_this.view.focus();
dispatch(state.tr.setSelection(new _selection.GapCursorSelection(state.doc.resolve(pos), _selection.Side.LEFT)));
}
});
(0, _defineProperty2.default)(this, "handleArrowRightFromTitle", function (event) {
if (!_this.input || !_this.selectNearNode) {
return;
}
var pos = _this.getPos();
if (typeof pos !== 'number') {
return;
}
var _this$input5 = _this.input,
value = _this$input5.value,
selectionStart = _this$input5.selectionStart,
selectionEnd = _this$input5.selectionEnd;
if (selectionStart === selectionEnd && selectionStart === value.length) {
event.preventDefault();
var _this$view8 = _this.view,
state = _this$view8.state,
dispatch = _this$view8.dispatch;
_this.view.focus();
var tr = _this.selectNearNode({
selectionRelativeToNode: _selection.RelativeSelectionPos.End,
selection: _state.NodeSelection.create(state.doc, pos)
})(state);
if (dispatch) {
dispatch(tr);
}
}
});
(0, _defineProperty2.default)(this, "handleArrowLeftFromTitle", function (event) {
if (!_this.input || !_this.selectNearNode) {
return;
}
var pos = _this.getPos();
if (typeof pos !== 'number') {
return;
}
var _this$input6 = _this.input,
selectionStart = _this$input6.selectionStart,
selectionEnd = _this$input6.selectionEnd;
if (selectionStart === selectionEnd && selectionStart === 0) {
var _this$api7;
event.preventDefault();
var _this$view9 = _this.view,
state = _this$view9.state,
dispatch = _this$view9.dispatch;
_this.view.focus();
var selectionSharedState = ((_this$api7 = _this.api) === null || _this$api7 === void 0 || (_this$api7 = _this$api7.selection) === null || _this$api7 === void 0 ? void 0 : _this$api7.sharedState.currentState()) || {};
// selectionRelativeToNode is undefined when user clicked to select node, then hit left to get focus in title
// This is a special case where we want to bypass node selection and jump straight to gap cursor
if ((selectionSharedState === null || selectionSharedState === void 0 ? void 0 : selectionSharedState.selectionRelativeToNode) === undefined) {
var tr = _this.selectNearNode({
selectionRelativeToNode: undefined,
selection: new _selection.GapCursorSelection(state.doc.resolve(pos), _selection.Side.LEFT)
})(state);
if (dispatch) {
dispatch(tr);
}
} else {
var _tr = _this.selectNearNode({
selectionRelativeToNode: _selection.RelativeSelectionPos.Start,
selection: _state.NodeSelection.create(state.doc, pos)
})(state);
if (dispatch) {
dispatch(_tr);
}
}
}
});
(0, _defineProperty2.default)(this, "handleUndoFromTitle", function (event) {
var _this$view0 = _this.view,
state = _this$view0.state,
dispatch = _this$view0.dispatch;
(0, _prosemirrorHistory.undo)(state, dispatch);
event.preventDefault();
return;
});
(0, _defineProperty2.default)(this, "handleRedoFromTitle", function (event) {
var _this$view1 = _this.view,
state = _this$view1.state,
dispatch = _this$view1.dispatch;
(0, _prosemirrorHistory.redo)(state, dispatch);
event.preventDefault();
return;
});
(0, _defineProperty2.default)(this, "getContentEditable", function (node) {
var contentEditable = !(0, _expand.isExpandCollapsed)(node);
if (_this.api && _this.api.editorDisabled) {
var _this$api$editorDisab;
return !((_this$api$editorDisab = _this.api.editorDisabled.sharedState.currentState()) !== null && _this$api$editorDisab !== void 0 && _this$api$editorDisab.editorDisabled) && contentEditable;
}
return contentEditable;
});
(0, _defineProperty2.default)(this, "renderIcon", function (icon, expanded) {
if (!icon) {
return;
}
_this.nodeViewPortalProviderAPI.render(function () {
return /*#__PURE__*/_react.default.createElement(_ExpandButton.ExpandButton, {
intl: _this.intl,
allowInteractiveExpand: _this.allowInteractiveExpand,
expanded: expanded
});
}, icon, _this.renderKey);
});
this.selectNearNode = selectNearNode;
this.__livePage = __livePage;
this.cleanUpEditorDisabledOnChange = cleanUpEditorDisabledOnChange;
this.isExpanded = isExpanded;
this.intl = getIntl();
this.nodeViewPortalProviderAPI = nodeViewPortalProviderAPI;
this.allowInteractiveExpand = allowInteractiveExpand;
this.getPos = getPos;
this.view = view;
this.node = _node;
if ((0, _experiments.editorExperiment)('platform_editor_block_menu', true, {
exposure: true
})) {
var _expandedState$get;
this.isExpanded.expanded = (_expandedState$get = _expand.expandedState.get(_node)) !== null && _expandedState$get !== void 0 ? _expandedState$get : false;
this.isExpanded.localId = _node.attrs.localId;
}
var _DOMSerializer$render = _model.DOMSerializer.renderSpec(document, (0, _NodeView.toDOM)(_node, this.__livePage, this.intl, api === null || api === void 0 || (_api$editorDisabled = api.editorDisabled) === null || _api$editorDisabled === void 0 || (_api$editorDisabled = _api$editorDisabled.sharedState.currentState()) === null || _api$editorDisabled === void 0 ? void 0 : _api$editorDisabled.editorDisabled)),
_dom = _DOMSerializer$render.dom,
contentDOM = _DOMSerializer$render.contentDOM;
// Ignored via go/ees005
// eslint-disable-next-line @atlaskit/editor/no-as-casting
this.dom = _dom;
// Ignored via go/ees005
// eslint-disable-next-line @atlaskit/editor/no-as-casting
this.contentDOM = contentDOM;
this.isMobile = isMobile;
this.api = api;
this.icon = this.dom.querySelector(".".concat(_styles.expandClassNames.icon));
this.input = this.dom.querySelector(".".concat(_styles.expandClassNames.titleInput));
this.titleContainer = this.dom.querySelector(".".concat(_styles.expandClassNames.titleContainer));
// eslint-disable-next-line @atlaskit/platform/prefer-crypto-random-uuid -- Use crypto.randomUUID instead
this.renderKey = (0, _v.default)();
this.content = this.dom.querySelector(".".concat(_styles.expandClassNames.content));
if (!_expand.expandedState.has(this.node)) {
_expand.expandedState.set(this.node, false);
}
if ((0, _expValEquals.expValEquals)('platform_editor_vc90_transition_expand_icon', 'isEnabled', true)) {
this.renderNativeIcon(this.node);
} else {
this.renderIcon(this.icon, !(0, _expand.isExpandCollapsed)(this.node));
}
if (!this.input || !this.titleContainer || !this.icon) {
return;
}
// Add event listeners
/* eslint-disable @repo/internal/dom-events/no-unsafe-event-listeners*/
this.dom.addEventListener('click', this.handleClick);
this.dom.addEventListener('input', this.handleInput);
this.input.addEventListener('keydown', this.handleTitleKeydown);
this.input.addEventListener('blur', this.handleBlur);
this.input.addEventListener('focus', this.handleInputFocus);
// If the user interacts in our title bar (either toggle or input)
// Prevent ProseMirror from getting a focus event (causes weird selection issues).
this.titleContainer.addEventListener('focus', this.handleFocus);
this.icon.addEventListener('keydown', this.handleIconKeyDown);
if ((_this$api8 = this.api) !== null && _this$api8 !== void 0 && _this$api8.editorDisabled) {
this.cleanUpEditorDisabledOnChange = this.api.editorDisabled.sharedState.onChange(function (sharedState) {
var editorDisabled = sharedState.nextSharedState.editorDisabled;
if (_this.input) {
if (editorDisabled) {
_this.input.setAttribute('readonly', 'true');
} else {
_this.input.removeAttribute('readonly');
}
}
if (_this.content) {
_this.content.setAttribute('contenteditable', _this.getContentEditable(_this.node) ? 'true' : 'false');
}
});
}
}
return (0, _createClass2.default)(ExpandNodeView, [{
key: "stopEvent",
value: function stopEvent(event) {
// Ignored via go/ees005
// eslint-disable-next-line @atlaskit/editor/no-as-casting
var target = event.target;
return target === this.input || target === this.icon || !!(0, _utils.closestElement)(target, ".".concat(_styles.expandClassNames.icon));
}
}, {
key: "ignoreMutation",
value: function ignoreMutation(mutationRecord) {
// ME-1931: Mobile relies on composition which creates dom mutations. If we ignore them, prosemirror
// does not recognise the changes and reverts them.
if (this.isMobile && (mutationRecord.type === 'characterData' || mutationRecord.type === 'childList')) {
return false;
}
if (mutationRecord.type === 'selection') {
return false;
}
return true;
}
}, {
key: "update",
value: function update(node, _decorations) {
var _this2 = this;
if (this.node.type === node.type) {
var _expandedState$get2;
// During a collab session the title doesn't sync with other users
// since we're intentionally being less aggressive about re-rendering.
// We also apply a rAF to avoid abrupt continuous replacement of the title.
window.requestAnimationFrame(function () {
if (_this2.input && _this2.node.attrs.title !== _this2.input.value) {
_this2.input.value = _this2.node.attrs.title;
}
});
// This checks if the node has been replaced with a different version
// and updates the state of the new node to match the old one
// Eg. typing in a node changes it to a new node so it must be updated
// in the expandedState weak map
if (this.node !== node) {
var wasExpanded = _expand.expandedState.get(this.node);
if (wasExpanded) {
_expand.expandedState.set(node, wasExpanded);
}
}
this.node = node;
var currentExpanded = (_expandedState$get2 = _expand.expandedState.get(node)) !== null && _expandedState$get2 !== void 0 ? _expandedState$get2 : false;
var hasChanged = (0, _experiments.editorExperiment)('platform_editor_block_menu', true, {
exposure: true
}) ? this.isExpanded.expanded !== currentExpanded && this.isExpanded.localId === node.attrs.localId : this.isExpanded.expanded !== currentExpanded;
if (hasChanged) {
this.updateExpandToggleIcon(node);
this.updateDisplayStyle(node);
}
return true;
}
return false;
}
}, {
key: "updateExpandToggleIcon",
value: function updateExpandToggleIcon(node) {
var expanded = _expand.expandedState.get(node) ? _expand.expandedState.get(node) : false;
if (this.dom && expanded !== undefined) {
if ((0, _expValEquals.expValEquals)('platform_editor_find_and_replace_improvements', 'isEnabled', true)) {
var classes = this.dom.className.split(' ');
// find & replace styles might be applied to the expand title and we need to keep them
var findReplaceDecorationsApplied = classes.filter(function (className) {
return _utils2.findReplaceExpandDecorations.includes(className);
}).join(' ');
this.dom.className = findReplaceDecorationsApplied ? (0, _NodeView.buildExpandClassName)(node.type.name, expanded) + " ".concat(findReplaceDecorationsApplied) : (0, _NodeView.buildExpandClassName)(node.type.name, expanded);
} else {
this.dom.className = (0, _NodeView.buildExpandClassName)(node.type.name, expanded);
}
// Re-render the icon to update the aria-expanded attribute
if ((0, _expValEquals.expValEquals)('platform_editor_vc90_transition_expand_icon', 'isEnabled', true)) {
this.renderNativeIcon(node);
} else {
var _expandedState$get3;
this.renderIcon(this.icon ? this.icon : null, (_expandedState$get3 = _expand.expandedState.get(node)) !== null && _expandedState$get3 !== void 0 ? _expandedState$get3 : false);
}
}
this.updateExpandBodyContentEditable();
this.isExpanded = (0, _experiments.editorExperiment)('platform_editor_block_menu', true, {
exposure: true
}) ? {
expanded: expanded !== null && expanded !== void 0 ? expanded : false,
localId: node.attrs.localId
} : {
expanded: expanded !== null && expanded !== void 0 ? expanded : false
};
}
}, {
key: "updateDisplayStyle",
value: function updateDisplayStyle(node) {
if (this.content) {
if ((0, _expand.isExpandCollapsed)(node)) {
this.content.classList.add(_styles.expandClassNames.contentCollapsed);
} else {
this.content.classList.remove(_styles.expandClassNames.contentCollapsed);
}
}
}
}, {
key: "updateExpandBodyContentEditable",
value: function updateExpandBodyContentEditable() {
// Disallow interaction/selection inside expand body when collapsed.
if (this.content) {
this.content.setAttribute('contenteditable', this.getContentEditable(this.node) ? 'true' : 'false');
}
}
}, {
key: "renderNativeIcon",
value: function renderNativeIcon(node) {
if (!this.icon) {
return;
}
(0, _renderExpandButton.renderExpandButton)(this.icon, {
expanded: !(0, _expand.isExpandCollapsed)(node),
allowInteractiveExpand: this.allowInteractiveExpand,
intl: this.intl
});
}
}, {
key: "destroy",
value: function destroy() {
var _this$decorationClean2;
if (!this.dom || !this.input || !this.titleContainer || !this.icon) {
return;
}
this.dom.removeEventListener('click', this.handleClick);
this.dom.removeEventListener('input', this.handleInput);
this.input.removeEventListener('keydown', this.handleTitleKeydown);
this.input.removeEventListener('blur', this.handleBlur);
this.input.removeEventListener('focus', this.handleInputFocus);
this.titleContainer.removeEventListener('focus', this.handleFocus);
this.icon.removeEventListener('keydown', this.handleIconKeyDown);
(_this$decorationClean2 = this.decorationCleanup) === null || _this$decorationClean2 === void 0 || _this$decorationClean2.call(this);
if (this.cleanUpEditorDisabledOnChange) {
this.cleanUpEditorDisabledOnChange();
}
this.nodeViewPortalProviderAPI.remove(this.renderKey);
}
}]);
}();
function _default(_ref2) {
var getIntl = _ref2.getIntl,
isMobile = _ref2.isMobile,
api = _ref2.api,
nodeViewPortalProviderAPI = _ref2.nodeViewPortalProviderAPI,
_ref2$allowInteractiv = _ref2.allowInteractiveExpand,
allowInteractiveExpand = _ref2$allowInteractiv === void 0 ? true : _ref2$allowInteractiv,
__livePage = _ref2.__livePage;
return function (node, view, getPos) {
var _api$selection;
return new ExpandNodeView(node, view, getPos, getIntl, isMobile, api === null || api === void 0 || (_api$selection = api.selection) === null || _api$selection === void 0 || (_api$selection = _api$selection.actions) === null || _api$selection === void 0 ? void 0 : _api$selection.selectNearNode, api, nodeViewPortalProviderAPI, allowInteractiveExpand, __livePage);
};
}