@atlaskit/editor-plugin-expand
Version:
Expand plugin for @atlaskit/editor-core
736 lines (732 loc) • 31.6 kB
JavaScript
import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
import _createClass from "@babel/runtime/helpers/createClass";
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 React from 'react';
// eslint-disable-next-line @atlaskit/platform/prefer-crypto-random-uuid -- Use crypto.randomUUID instead
import uuid from 'uuid/v4';
import { keyName } from 'w3c-keyname';
import { GapCursorSelection, RelativeSelectionPos, Side } from '@atlaskit/editor-common/selection';
import { expandClassNames } from '@atlaskit/editor-common/styles';
import { expandMessages } from '@atlaskit/editor-common/ui';
import { closestElement, isEmptyNode } from '@atlaskit/editor-common/utils';
import { DOMSerializer } from '@atlaskit/editor-prosemirror/model';
import { NodeSelection, Selection } from '@atlaskit/editor-prosemirror/state';
import { fg } from '@atlaskit/platform-feature-flags';
import { redo, undo } from '@atlaskit/prosemirror-history';
import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
import { renderExpandButton } from '../../ui/renderExpandButton';
import { deleteExpandAtPos, setSelectionInsideExpand, toggleExpandExpanded, updateExpandTitle } from '../commands';
import { ExpandIconButton } from '../ui/ExpandIconButton';
function buildExpandClassName(type, expanded) {
return "".concat(expandClassNames.prefix, " ").concat(expandClassNames.type(type), " ").concat(expanded ? expandClassNames.expanded : '');
}
var toDOM = function toDOM(node, __livePage, intl, titleReadOnly, contentEditable) {
return ['div', _objectSpread({
// prettier-ignore
'class': buildExpandClassName(node.type.name, __livePage ? !node.attrs.__expanded : node.attrs.__expanded),
'data-node-type': node.type.name,
'data-title': node.attrs.title
}, fg('platform_editor_adf_with_localid') && {
'data-local-id': node.attrs.localId
}), ['div', {
// prettier-ignore
'class': expandClassNames.titleContainer,
contenteditable: 'false',
// Element gains access to focus events.
// This is needed to prevent PM gaining access
// on interacting with our controls.
tabindex: '-1'
},
// prettier-ignore
['div', {
'class': expandClassNames.icon,
style: "display: flex; width: ".concat("var(--ds-space-300, 24px)", "; height: ", "var(--ds-space-300, 24px)")
}], ['div', {
// prettier-ignore
'class': expandClassNames.inputContainer
}, ['input', {
// prettier-ignore
'class': expandClassNames.titleInput,
'aria-label': intl && intl.formatMessage(expandMessages.expandArialabel) || expandMessages.expandArialabel.defaultMessage,
value: node.attrs.title,
placeholder: intl && intl.formatMessage(expandMessages.expandPlaceholderText) || expandMessages.expandPlaceholderText.defaultMessage,
type: 'text',
readonly: titleReadOnly ? 'true' : undefined
}]]], ['div', {
// prettier-ignore
class: "".concat(expandClassNames.content, " ").concat((__livePage ? !node.attrs.__expanded : node.attrs.__expanded) ? '' : expandClassNames.contentCollapsed),
contenteditable: contentEditable !== undefined ? contentEditable ? 'true' : 'false' : undefined
}, 0]];
};
export var ExpandNodeView = /*#__PURE__*/function () {
function ExpandNodeView(_node, view, getPos, getIntl, isMobile, selectNearNode, api, nodeViewPortalProviderAPI) {
var _this = this,
_api$editorDisabled;
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;
_classCallCheck(this, ExpandNodeView);
_defineProperty(this, "allowInteractiveExpand", true);
_defineProperty(this, "isMobile", false);
_defineProperty(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: RelativeSelectionPos.Start
})(state);
if (dispatch) {
dispatch(tr);
}
}
var pos = _this.getPos();
if (typeof pos === 'number') {
setSelectionInsideExpand(pos)(state, dispatch, _this.view);
}
_this.input.focus();
}
});
_defineProperty(this, "handleIconKeyDown", function (event) {
switch (keyName(event)) {
case 'Tab':
event.preventDefault();
_this.focusTitle();
break;
case 'Enter':
event.preventDefault();
_this.handleClick(event);
break;
}
});
_defineProperty(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;
var _this$view2 = _this.view,
state = _this$view2.state,
dispatch = _this$view2.dispatch;
if (closestElement(target, ".".concat(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();
}
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,
nodeType: _this.node.type,
__livePage: _this.__livePage
})(state, dispatch);
return;
}
if (target === _this.input) {
event.stopPropagation();
_this.focusTitle();
return;
}
});
_defineProperty(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$view3 = _this.view,
state = _this$view3.state,
dispatch = _this$view3.dispatch;
updateExpandTitle({
title: target.value,
pos: pos,
nodeType: _this.node.type,
__livePage: _this.__livePage
})(state, dispatch);
}
});
_defineProperty(this, "handleFocus", function (event) {
event.stopImmediatePropagation();
});
_defineProperty(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();
});
_defineProperty(this, "handleBlur", function () {
var _this$decorationClean;
(_this$decorationClean = _this.decorationCleanup) === null || _this$decorationClean === void 0 || _this$decorationClean.call(_this);
});
_defineProperty(this, "handleTitleKeydown", function (event) {
// Handle Ctrl+Shift+H to select the expand node for drag handle
// Note: If changing this implementation in legacyExpand, please also update the implementation in singlePlayerExpand
if (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(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 = dom.getAttribute('data-node-anchor');
// 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;
}
var keyName_result = keyName(event);
switch (keyName_result) {
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 (expValEquals('platform_editor_lovability_navigation_fixes', 'isEnabled', true)) {
_this.moveToPreviousLine(event);
} else {
_this.setLeftGapCursor(event);
}
break;
case 'Backspace':
_this.deleteExpand(event);
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 (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
}));
}
}
});
_defineProperty(this, "deleteExpand", function (_event) {
if (!_this.input) {
return;
}
var pos = _this.getPos();
if (typeof pos !== 'number') {
return;
}
var _this$input = _this.input,
selectionStart = _this$input.selectionStart,
selectionEnd = _this$input.selectionEnd;
if (selectionStart !== selectionEnd || selectionStart !== 0) {
return;
}
var state = _this.view.state;
var expandNode = _this.node;
if (expandNode && isEmptyNode(state.schema)(expandNode)) {
var _this$api5;
deleteExpandAtPos((_this$api5 = _this.api) === null || _this$api5 === void 0 || (_this$api5 = _this$api5.analytics) === null || _this$api5 === void 0 ? void 0 : _this$api5.actions)(pos, expandNode)(state, _this.view.dispatch);
}
});
_defineProperty(this, "toggleExpand", function () {
var pos = _this.getPos();
if (typeof pos !== 'number') {
return;
}
if (_this.allowInteractiveExpand) {
var _this$api6;
var _this$view4 = _this.view,
state = _this$view4.state,
dispatch = _this$view4.dispatch;
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,
nodeType: _this.node.type,
__livePage: _this.__livePage
})(state, dispatch);
}
});
_defineProperty(this, "moveToOutsideOfTitle", function (event) {
event.preventDefault();
var _this$view5 = _this.view,
state = _this$view5.state,
dispatch = _this$view5.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 = 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));
}
});
_defineProperty(this, "isCollapsed", function () {
if (_this.__livePage) {
return _this.node.attrs.__expanded;
}
return !_this.node.attrs.__expanded;
});
_defineProperty(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;
if (selectionStart === selectionEnd && selectionStart === value.length) {
var _this$view6 = _this.view,
state = _this$view6.state,
dispatch = _this$view6.dispatch;
event.preventDefault();
_this.view.focus();
dispatch(state.tr.setSelection(new GapCursorSelection(state.doc.resolve(_this.node.nodeSize + pos), Side.RIGHT)));
}
});
_defineProperty(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$view7 = _this.view,
state = _this$view7.state,
dispatch = _this$view7.dispatch;
var resolvedPos = state.doc.resolve(pos);
if (!resolvedPos) {
return;
}
if (resolvedPos.pos === 0) {
_this.setLeftGapCursor(event);
return;
}
var sel = Selection.findFrom(resolvedPos, -1);
if (sel) {
_this.view.focus();
dispatch(state.tr.setSelection(sel));
}
}
});
_defineProperty(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$view8 = _this.view,
state = _this$view8.state,
dispatch = _this$view8.dispatch;
_this.view.focus();
dispatch(state.tr.setSelection(new GapCursorSelection(state.doc.resolve(pos), Side.LEFT)));
}
});
_defineProperty(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$view9 = _this.view,
state = _this$view9.state,
dispatch = _this$view9.dispatch;
_this.view.focus();
var tr = _this.selectNearNode({
selectionRelativeToNode: RelativeSelectionPos.End,
selection: NodeSelection.create(state.doc, pos)
})(state);
if (dispatch) {
dispatch(tr);
}
}
});
_defineProperty(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$view0 = _this.view,
state = _this$view0.state,
dispatch = _this$view0.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 GapCursorSelection(state.doc.resolve(pos), Side.LEFT)
})(state);
if (dispatch) {
dispatch(tr);
}
} else {
var _tr = _this.selectNearNode({
selectionRelativeToNode: RelativeSelectionPos.Start,
selection: NodeSelection.create(state.doc, pos)
})(state);
if (dispatch) {
dispatch(_tr);
}
}
}
});
_defineProperty(this, "handleUndoFromTitle", function (event) {
var _this$view1 = _this.view,
state = _this$view1.state,
dispatch = _this$view1.dispatch;
undo(state, dispatch);
event.preventDefault();
return;
});
_defineProperty(this, "handleRedoFromTitle", function (event) {
var _this$view10 = _this.view,
state = _this$view10.state,
dispatch = _this$view10.dispatch;
redo(state, dispatch);
event.preventDefault();
return;
});
_defineProperty(this, "getContentEditable", function (node) {
var contentEditable = _this.__livePage ? !node.attrs.__expanded : node.attrs.__expanded;
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;
});
this.selectNearNode = selectNearNode;
this.__livePage = __livePage;
this.cleanUpEditorDisabledOnChange = cleanUpEditorDisabledOnChange;
this.intl = getIntl();
var _DOMSerializer$render = DOMSerializer.renderSpec(document, 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;
this.nodeViewPortalProviderAPI = nodeViewPortalProviderAPI;
this.allowInteractiveExpand = allowInteractiveExpand;
this.getPos = getPos;
this.view = view;
this.node = _node;
// 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(expandClassNames.icon));
this.input = this.dom.querySelector(".".concat(expandClassNames.titleInput));
this.titleContainer = this.dom.querySelector(".".concat(expandClassNames.titleContainer));
this.content = this.dom.querySelector(".".concat(expandClassNames.content));
// eslint-disable-next-line @atlaskit/platform/prefer-crypto-random-uuid -- Use crypto.randomUUID instead
this.renderKey = uuid();
if (expValEquals('platform_editor_vc90_transition_expand_icon', 'isEnabled', true)) {
this.renderNativeIcon(this.node);
} else {
this.renderIcon(this.intl);
}
this.initHandlers();
}
return _createClass(ExpandNodeView, [{
key: "initHandlers",
value: function initHandlers() {
var _this$api8,
_this2 = this;
if (this.dom) {
// eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
this.dom.addEventListener('click', this.handleClick);
// eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
this.dom.addEventListener('input', this.handleInput);
}
if (this.input) {
// eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
this.input.addEventListener('keydown', this.handleTitleKeydown);
// eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
this.input.addEventListener('blur', this.handleBlur);
// eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
this.input.addEventListener('focus', this.handleInputFocus);
}
if (this.titleContainer) {
// If the user interacts in our title bar (either toggle or input)
// Prevent ProseMirror from getting a focus event (causes weird selection issues).
// eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
this.titleContainer.addEventListener('focus', this.handleFocus);
}
if (this.icon) {
// eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
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 (_this2.input) {
if (editorDisabled) {
_this2.input.setAttribute('readonly', 'true');
} else {
_this2.input.removeAttribute('readonly');
}
}
if (_this2.content) {
_this2.content.setAttribute('contenteditable', _this2.getContentEditable(_this2.node) ? 'true' : 'false');
}
_this2.updateDisplayStyle(_this2.node);
});
}
}
}, {
key: "renderNativeIcon",
value: function renderNativeIcon(node) {
if (!this.icon) {
return;
}
var __expanded = node.attrs.__expanded;
renderExpandButton(this.icon, {
expanded: this.__livePage ? !__expanded : __expanded,
allowInteractiveExpand: this.allowInteractiveExpand,
intl: this.intl
});
}
}, {
key: "renderIcon",
value: function renderIcon(intl, node) {
var _this3 = this;
if (!this.icon) {
return;
}
var _ref2 = node && node.attrs || this.node.attrs,
__expanded = _ref2.__expanded;
this.nodeViewPortalProviderAPI.render(function () {
return /*#__PURE__*/React.createElement(ExpandIconButton, {
intl: intl,
allowInteractiveExpand: _this3.allowInteractiveExpand,
expanded: _this3.__livePage ? !__expanded : __expanded
});
}, this.icon, this.renderKey);
}
}, {
key: "updateDisplayStyle",
value: function updateDisplayStyle(node) {
if (this.content) {
var isCollapsed = this.__livePage ? node.attrs.__expanded : !node.attrs.__expanded;
if (isCollapsed) {
this.content.classList.add(expandClassNames.contentCollapsed);
} else {
this.content.classList.remove(expandClassNames.contentCollapsed);
}
}
}
}, {
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 || !!closestElement(target, ".".concat(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 _this4 = this;
if (this.node.type === node.type) {
if (this.node.attrs.__expanded !== node.attrs.__expanded) {
// Instead of re-rendering the view on an expand toggle
// we toggle a class name to hide the content and animate the chevron.
if (this.dom) {
this.dom.classList.toggle(expandClassNames.expanded);
if (expValEquals('platform_editor_vc90_transition_expand_icon', 'isEnabled', true)) {
this.renderNativeIcon(node);
} else {
this.renderIcon(this && this.intl, node);
}
}
if (this.content) {
// Disallow interaction/selection inside when collapsed.
this.content.setAttribute('contenteditable', this.getContentEditable(node) ? 'true' : 'false');
}
this.updateDisplayStyle(node);
}
// 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 (_this4.input && _this4.node.attrs.title !== _this4.input.value) {
_this4.input.value = _this4.node.attrs.title;
}
});
this.node = node;
return true;
}
return false;
}
}, {
key: "destroy",
value: function destroy() {
var _this$decorationClean2;
if (this.dom) {
// eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
this.dom.removeEventListener('click', this.handleClick);
// eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
this.dom.removeEventListener('input', this.handleInput);
}
if (this.input) {
// eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
this.input.removeEventListener('keydown', this.handleTitleKeydown);
// eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
this.input.removeEventListener('blur', this.handleBlur);
// eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
this.input.removeEventListener('focus', this.handleInputFocus);
}
if (this.titleContainer) {
// eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
this.titleContainer.removeEventListener('focus', this.handleFocus);
}
if (this.icon) {
// eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
this.icon.removeEventListener('keydown', this.handleIconKeyDown);
this.nodeViewPortalProviderAPI.remove(this.renderKey);
}
(_this$decorationClean2 = this.decorationCleanup) === null || _this$decorationClean2 === void 0 || _this$decorationClean2.call(this);
if (this.cleanUpEditorDisabledOnChange) {
this.cleanUpEditorDisabledOnChange();
}
// @ts-ignore - [unblock prosemirror bump] reset non optional prop to undefined to clear reference
this.dom = undefined;
this.contentDOM = undefined;
this.icon = undefined;
this.input = undefined;
this.titleContainer = undefined;
this.content = undefined;
this.cleanUpEditorDisabledOnChange = undefined;
}
}]);
}();
export default function (_ref3) {
var getIntl = _ref3.getIntl,
isMobile = _ref3.isMobile,
api = _ref3.api,
nodeViewPortalProviderAPI = _ref3.nodeViewPortalProviderAPI,
_ref3$allowInteractiv = _ref3.allowInteractiveExpand,
allowInteractiveExpand = _ref3$allowInteractiv === void 0 ? true : _ref3$allowInteractiv,
__livePage = _ref3.__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);
};
}