@atlaskit/editor-plugin-expand 1.3.1 → 1.3.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (74) hide show
  1. package/CHANGELOG.md +6 -0
  2. package/dist/cjs/singlePlayerExpand/commands.js +134 -0
  3. package/dist/cjs/singlePlayerExpand/node-views/index.js +381 -0
  4. package/dist/cjs/singlePlayerExpand/plugin.js +72 -9
  5. package/dist/cjs/singlePlayerExpand/pm-plugins/keymap.js +121 -0
  6. package/dist/cjs/singlePlayerExpand/pm-plugins/main.js +68 -0
  7. package/dist/cjs/singlePlayerExpand/toolbar.js +59 -0
  8. package/dist/cjs/singlePlayerExpand/ui/ExpandButton.js +87 -0
  9. package/dist/cjs/singlePlayerExpand/ui/NodeView.js +59 -0
  10. package/dist/cjs/singlePlayerExpand/utils.js +35 -0
  11. package/dist/es2019/index.js +0 -2
  12. package/dist/es2019/legacyExpand/pm-plugins/keymap.js +1 -2
  13. package/dist/es2019/singlePlayerExpand/commands.js +118 -0
  14. package/dist/es2019/singlePlayerExpand/node-views/index.js +370 -0
  15. package/dist/es2019/singlePlayerExpand/plugin.js +69 -10
  16. package/dist/es2019/singlePlayerExpand/pm-plugins/keymap.js +137 -0
  17. package/dist/es2019/singlePlayerExpand/pm-plugins/main.js +53 -0
  18. package/dist/es2019/singlePlayerExpand/toolbar.js +51 -0
  19. package/dist/es2019/singlePlayerExpand/ui/ExpandButton.js +77 -0
  20. package/dist/es2019/singlePlayerExpand/ui/NodeView.js +52 -0
  21. package/dist/es2019/singlePlayerExpand/utils.js +5 -0
  22. package/dist/esm/index.js +0 -2
  23. package/dist/esm/legacyExpand/pm-plugins/keymap.js +1 -2
  24. package/dist/esm/singlePlayerExpand/commands.js +128 -0
  25. package/dist/esm/singlePlayerExpand/node-views/index.js +373 -0
  26. package/dist/esm/singlePlayerExpand/plugin.js +71 -10
  27. package/dist/esm/singlePlayerExpand/pm-plugins/keymap.js +115 -0
  28. package/dist/esm/singlePlayerExpand/pm-plugins/main.js +60 -0
  29. package/dist/esm/singlePlayerExpand/toolbar.js +52 -0
  30. package/dist/esm/singlePlayerExpand/ui/ExpandButton.js +77 -0
  31. package/dist/esm/singlePlayerExpand/ui/NodeView.js +53 -0
  32. package/dist/esm/singlePlayerExpand/utils.js +5 -0
  33. package/dist/types/index.d.ts +1 -1
  34. package/dist/types/legacyExpand/nodeviews/index.d.ts +1 -1
  35. package/dist/types/legacyExpand/plugin.d.ts +1 -1
  36. package/dist/types/legacyExpand/pm-plugins/keymap.d.ts +1 -1
  37. package/dist/types/legacyExpand/pm-plugins/main.d.ts +2 -2
  38. package/dist/types/legacyExpand/pm-plugins/plugin-factory.d.ts +1 -1
  39. package/dist/types/legacyExpand/reducer.d.ts +1 -1
  40. package/dist/types/legacyExpand/toolbar.d.ts +1 -1
  41. package/dist/types/plugin.d.ts +1 -1
  42. package/dist/types/singlePlayerExpand/commands.d.ts +15 -0
  43. package/dist/types/singlePlayerExpand/node-views/index.d.ts +51 -0
  44. package/dist/types/singlePlayerExpand/plugin.d.ts +1 -1
  45. package/dist/types/singlePlayerExpand/pm-plugins/keymap.d.ts +6 -0
  46. package/dist/types/singlePlayerExpand/pm-plugins/main.d.ts +9 -0
  47. package/dist/types/singlePlayerExpand/toolbar.d.ts +3 -0
  48. package/dist/types/singlePlayerExpand/ui/ExpandButton.d.ts +13 -0
  49. package/dist/types/singlePlayerExpand/ui/NodeView.d.ts +5 -0
  50. package/dist/types/singlePlayerExpand/utils.d.ts +3 -0
  51. package/dist/{types-ts4.5/legacyExpand → types}/types.d.ts +1 -1
  52. package/dist/types-ts4.5/index.d.ts +1 -1
  53. package/dist/types-ts4.5/legacyExpand/nodeviews/index.d.ts +1 -1
  54. package/dist/types-ts4.5/legacyExpand/plugin.d.ts +1 -1
  55. package/dist/types-ts4.5/legacyExpand/pm-plugins/keymap.d.ts +1 -1
  56. package/dist/types-ts4.5/legacyExpand/pm-plugins/main.d.ts +2 -2
  57. package/dist/types-ts4.5/legacyExpand/pm-plugins/plugin-factory.d.ts +1 -1
  58. package/dist/types-ts4.5/legacyExpand/reducer.d.ts +1 -1
  59. package/dist/types-ts4.5/legacyExpand/toolbar.d.ts +1 -1
  60. package/dist/types-ts4.5/plugin.d.ts +1 -1
  61. package/dist/types-ts4.5/singlePlayerExpand/commands.d.ts +15 -0
  62. package/dist/types-ts4.5/singlePlayerExpand/node-views/index.d.ts +51 -0
  63. package/dist/types-ts4.5/singlePlayerExpand/plugin.d.ts +1 -1
  64. package/dist/types-ts4.5/singlePlayerExpand/pm-plugins/keymap.d.ts +6 -0
  65. package/dist/types-ts4.5/singlePlayerExpand/pm-plugins/main.d.ts +9 -0
  66. package/dist/types-ts4.5/singlePlayerExpand/toolbar.d.ts +3 -0
  67. package/dist/types-ts4.5/singlePlayerExpand/ui/ExpandButton.d.ts +13 -0
  68. package/dist/types-ts4.5/singlePlayerExpand/ui/NodeView.d.ts +5 -0
  69. package/dist/types-ts4.5/singlePlayerExpand/utils.d.ts +3 -0
  70. package/dist/{types/legacyExpand → types-ts4.5}/types.d.ts +1 -1
  71. package/package.json +1 -1
  72. /package/dist/cjs/{legacyExpand/types.js → types.js} +0 -0
  73. /package/dist/es2019/{legacyExpand/types.js → types.js} +0 -0
  74. /package/dist/esm/{legacyExpand/types.js → types.js} +0 -0
@@ -0,0 +1,121 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.expandKeymap = expandKeymap;
7
+ var _keymaps = require("@atlaskit/editor-common/keymaps");
8
+ var _selection = require("@atlaskit/editor-common/selection");
9
+ var _transforms = require("@atlaskit/editor-common/transforms");
10
+ var _utils = require("@atlaskit/editor-common/utils");
11
+ var _keymap = require("@atlaskit/editor-prosemirror/keymap");
12
+ var _state = require("@atlaskit/editor-prosemirror/state");
13
+ var _commands = require("../commands");
14
+ var isExpandNode = function isExpandNode(node) {
15
+ return (node === null || node === void 0 ? void 0 : node.type.name) === 'expand' || (node === null || node === void 0 ? void 0 : node.type.name) === 'nestedExpand';
16
+ };
17
+ function expandKeymap(api, options) {
18
+ var list = {};
19
+ (0, _keymaps.bindKeymapWithCommand)(_keymaps.moveUp.common, function (state, dispatch, editorView) {
20
+ if (!editorView) {
21
+ return false;
22
+ }
23
+ var selection = state.selection,
24
+ schema = state.schema;
25
+ var nodeBefore = selection.$from.nodeBefore;
26
+ if (selection instanceof _selection.GapCursorSelection && selection.side === _selection.Side.RIGHT && nodeBefore && (nodeBefore.type === schema.nodes.expand || nodeBefore.type === schema.nodes.nestedExpand)
27
+ // TO-DO: add back in expanded logic
28
+ ) {
29
+ var _$from = selection.$from;
30
+ return (0, _commands.focusTitle)(Math.max(_$from.pos - 1, 0))(state, dispatch, editorView);
31
+ }
32
+ var $from = state.selection.$from;
33
+ if (editorView.endOfTextblock('up')) {
34
+ var expand = (0, _transforms.findExpand)(state);
35
+
36
+ // Moving UP in a table should move the cursor to the row above
37
+ // however when an expand is in a table cell to the left of the
38
+ // current table cell, arrow UP moves the cursor to the left
39
+ // see ED-15425
40
+ if ((0, _utils.isPositionNearTableRow)($from, schema, 'before') && !expand) {
41
+ return false;
42
+ }
43
+ var prevCursorPos = Math.max($from.pos - $from.parentOffset - 1, 0);
44
+ // move cursor from expand's content to its title
45
+ if (expand && expand.start === prevCursorPos) {
46
+ return (0, _commands.focusTitle)(expand.start)(state, dispatch, editorView);
47
+ }
48
+ var sel = _state.Selection.findFrom(state.doc.resolve(prevCursorPos), -1);
49
+ var expandBefore = (0, _transforms.findExpand)(state, sel);
50
+ if (sel && expandBefore) {
51
+ // moving cursor from outside of an expand to the title when it is collapsed
52
+
53
+ // TO-DO: Bring back expanded logic
54
+ return (0, _commands.focusTitle)(expandBefore.start)(state, dispatch, editorView);
55
+ }
56
+ }
57
+ return false;
58
+ }, list);
59
+ (0, _keymaps.bindKeymapWithCommand)(_keymaps.moveDown.common, function (state, dispatch, editorView) {
60
+ if (!editorView) {
61
+ return false;
62
+ }
63
+ var _state$schema$nodes = state.schema.nodes,
64
+ expand = _state$schema$nodes.expand,
65
+ nestedExpand = _state$schema$nodes.nestedExpand;
66
+ var selection = state.selection;
67
+ var nodeAfter = selection.$from.nodeAfter;
68
+ if (selection instanceof _selection.GapCursorSelection && selection.side === _selection.Side.LEFT && nodeAfter && (nodeAfter.type === expand || nodeAfter.type === nestedExpand)
69
+ // TO-DO: Bring back expanded logic
70
+ ) {
71
+ var $from = selection.$from;
72
+ return (0, _commands.focusTitle)($from.pos + 1)(state, dispatch, editorView);
73
+ }
74
+ if (editorView.endOfTextblock('down')) {
75
+ var _$from2 = state.selection.$from;
76
+ if (_$from2.depth === 0) {
77
+ return false;
78
+ }
79
+ var $after = state.doc.resolve(_$from2.after());
80
+ if ($after.nodeAfter && ($after.nodeAfter.type === expand || $after.nodeAfter.type === nestedExpand)) {
81
+ return (0, _commands.focusTitle)($after.pos + 1)(state, dispatch, editorView);
82
+ }
83
+ }
84
+ return false;
85
+ }, list);
86
+ (0, _keymaps.bindKeymapWithCommand)(_keymaps.backspace.common, function (state, dispatch, editorView) {
87
+ var selection = state.selection;
88
+ var $from = selection.$from;
89
+ if (!editorView || !selection.empty) {
90
+ return false;
91
+ }
92
+ var _state$schema$nodes2 = state.schema.nodes,
93
+ expand = _state$schema$nodes2.expand,
94
+ nestedExpand = _state$schema$nodes2.nestedExpand;
95
+ var expandNode = (0, _transforms.findExpand)(state);
96
+ if (!expandNode) {
97
+ // @see ED-7977
98
+ var sel = _state.Selection.findFrom(state.doc.resolve(Math.max(selection.$from.pos - 1, 0)), -1);
99
+ var expandBefore = (0, _transforms.findExpand)(state, sel);
100
+ if (expandBefore && (expandBefore.node.type === expand || expandBefore.node.type === nestedExpand)
101
+ // TO-DO: Bring back expanded logic
102
+ ) {
103
+ return (0, _commands.focusTitle)(expandBefore.start)(state, dispatch, editorView);
104
+ }
105
+ return false;
106
+ }
107
+ var parentNode = state.doc.nodeAt($from.before(Math.max($from.depth - 1, 1)));
108
+ // ED-10012 catch cases where the expand has another node nested within it and
109
+ // the backspace should be applied only to the inner node instead of the expand
110
+ if (parentNode && !isExpandNode(parentNode)) {
111
+ return false;
112
+ }
113
+ var textSel = _state.Selection.findFrom(state.doc.resolve(expandNode.pos), 1, true);
114
+ if (textSel && selection.$from.pos === textSel.$from.pos && (0, _utils.isEmptyNode)(state.schema)(expandNode.node) && dispatch) {
115
+ var _api$analytics;
116
+ return (0, _commands.deleteExpand)(api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions)(state, dispatch);
117
+ }
118
+ return false;
119
+ }, list);
120
+ return (0, _keymap.keymap)(list);
121
+ }
@@ -0,0 +1,68 @@
1
+ "use strict";
2
+
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
+ Object.defineProperty(exports, "__esModule", {
5
+ value: true
6
+ });
7
+ exports.containsClass = containsClass;
8
+ exports.pluginKey = exports.createPlugin = void 0;
9
+ var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
10
+ var _selection = require("@atlaskit/editor-common/selection");
11
+ var _styles = require("@atlaskit/editor-common/styles");
12
+ var _state = require("@atlaskit/editor-prosemirror/state");
13
+ var _nodeViews = _interopRequireDefault(require("../node-views"));
14
+ var pluginKey = exports.pluginKey = new _state.PluginKey('expandPlugin');
15
+ function containsClass(element, className) {
16
+ var _element$classList;
17
+ return Boolean(element === null || element === void 0 || (_element$classList = element.classList) === null || _element$classList === void 0 ? void 0 : _element$classList.contains(className));
18
+ }
19
+ var createPlugin = exports.createPlugin = function createPlugin(dispatch, getIntl) {
20
+ var appearance = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'full-page';
21
+ var useLongPressSelection = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
22
+ var api = arguments.length > 4 ? arguments[4] : undefined;
23
+ var allowInteractiveExpand = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : true;
24
+ var __livePage = arguments.length > 6 && arguments[6] !== undefined ? arguments[6] : false;
25
+ var isMobile = appearance === 'mobile';
26
+ return new _safePlugin.SafePlugin({
27
+ key: pluginKey,
28
+ props: {
29
+ nodeViews: {
30
+ expand: (0, _nodeViews.default)({
31
+ getIntl: getIntl,
32
+ isMobile: isMobile,
33
+ api: api,
34
+ allowInteractiveExpand: allowInteractiveExpand,
35
+ __livePage: __livePage
36
+ }),
37
+ nestedExpand: (0, _nodeViews.default)({
38
+ getIntl: getIntl,
39
+ isMobile: isMobile,
40
+ api: api,
41
+ allowInteractiveExpand: allowInteractiveExpand,
42
+ __livePage: __livePage
43
+ })
44
+ },
45
+ handleKeyDown: function handleKeyDown(_view, event) {
46
+ return containsClass(event.target, _styles.expandClassNames.titleContainer);
47
+ },
48
+ handleKeyPress: function handleKeyPress(_view, event) {
49
+ return containsClass(event.target, _styles.expandClassNames.titleContainer);
50
+ },
51
+ handleScrollToSelection: function handleScrollToSelection() {
52
+ return containsClass(document.activeElement, _styles.expandClassNames.titleInput);
53
+ },
54
+ handleClickOn: (0, _selection.createSelectionClickHandler)(['expand', 'nestedExpand'], function (target) {
55
+ return target.classList.contains(_styles.expandClassNames.prefix);
56
+ }, {
57
+ useLongPressSelection: useLongPressSelection
58
+ })
59
+ },
60
+ // @see ED-8027 to follow up on this work-around
61
+ filterTransaction: function filterTransaction(tr) {
62
+ if (containsClass(document.activeElement, _styles.expandClassNames.titleInput) && tr.selectionSet && (!tr.steps.length || tr.isGeneric)) {
63
+ return false;
64
+ }
65
+ return true;
66
+ }
67
+ });
68
+ };
@@ -0,0 +1,59 @@
1
+ "use strict";
2
+
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
+ Object.defineProperty(exports, "__esModule", {
5
+ value: true
6
+ });
7
+ exports.getToolbarConfig = void 0;
8
+ var _messages = _interopRequireDefault(require("@atlaskit/editor-common/messages"));
9
+ var _utils = require("@atlaskit/editor-prosemirror/utils");
10
+ var _remove = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/remove"));
11
+ var _commands = require("./commands");
12
+ var _utils2 = require("./utils");
13
+ var getToolbarConfig = exports.getToolbarConfig = function getToolbarConfig(api) {
14
+ return function (state, _ref) {
15
+ var _api$decorations$acti, _api$decorations, _api$analytics;
16
+ var formatMessage = _ref.formatMessage;
17
+ var _ref2 = (_api$decorations$acti = api === null || api === void 0 || (_api$decorations = api.decorations) === null || _api$decorations === void 0 ? void 0 : _api$decorations.actions) !== null && _api$decorations$acti !== void 0 ? _api$decorations$acti : {},
18
+ hoverDecoration = _ref2.hoverDecoration;
19
+ var editorAnalyticsAPI = api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions;
20
+ var selectedExpandNode = (0, _utils2.findParentExpandNode)(state);
21
+ if (selectedExpandNode) {
22
+ var _state$schema$nodes = state.schema.nodes,
23
+ nestedExpand = _state$schema$nodes.nestedExpand,
24
+ expand = _state$schema$nodes.expand;
25
+ return {
26
+ title: 'Expand toolbar',
27
+ getDomRef: function getDomRef(view) {
28
+ return (0, _utils.findDomRefAtPos)(selectedExpandNode.pos, view.domAtPos.bind(view));
29
+ },
30
+ nodeType: [nestedExpand, expand],
31
+ offset: [0, 6],
32
+ items: [{
33
+ type: 'copy-button',
34
+ items: [{
35
+ state: state,
36
+ formatMessage: formatMessage,
37
+ nodeType: [nestedExpand, expand]
38
+ }, {
39
+ type: 'separator'
40
+ }]
41
+ }, {
42
+ id: 'editor.expand.delete',
43
+ type: 'button',
44
+ appearance: 'danger',
45
+ focusEditoronEnter: true,
46
+ icon: _remove.default,
47
+ onClick: (0, _commands.deleteExpand)(editorAnalyticsAPI),
48
+ onMouseEnter: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration([nestedExpand, expand], true),
49
+ onMouseLeave: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration([nestedExpand, expand], false),
50
+ onFocus: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration([nestedExpand, expand], true),
51
+ onBlur: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration([nestedExpand, expand], false),
52
+ title: formatMessage(_messages.default.remove),
53
+ tabIndex: null
54
+ }]
55
+ };
56
+ }
57
+ return;
58
+ };
59
+ };
@@ -0,0 +1,87 @@
1
+ "use strict";
2
+
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
+ var _typeof = require("@babel/runtime/helpers/typeof");
5
+ Object.defineProperty(exports, "__esModule", {
6
+ value: true
7
+ });
8
+ exports.ExpandButtonInner = exports.ExpandButton = void 0;
9
+ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
10
+ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
11
+ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
12
+ var _react = _interopRequireWildcard(require("react"));
13
+ var _react2 = require("@emotion/react");
14
+ var _customThemeButton = _interopRequireDefault(require("@atlaskit/button/custom-theme-button"));
15
+ var _styles = require("@atlaskit/editor-common/styles");
16
+ var _ui = require("@atlaskit/editor-common/ui");
17
+ var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
18
+ var _chevronRight = _interopRequireDefault(require("@atlaskit/icon/glyph/chevron-right"));
19
+ var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
20
+ var _excluded = ["buttonStyles"];
21
+ /** @jsx jsx */
22
+ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
23
+ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
24
+ 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; }
25
+ 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; }
26
+ function withTooltip(Component) {
27
+ return function WithTooltip(props) {
28
+ return (0, _react2.jsx)(_tooltip.default, {
29
+ content: props.label,
30
+ position: "top",
31
+ tag: _ui.ExpandLayoutWrapperWithRef
32
+ }, (0, _react2.jsx)(Component, props));
33
+ };
34
+ }
35
+ var ExpandButtonInner = exports.ExpandButtonInner = function ExpandButtonInner(props) {
36
+ var useTheme = (0, _react.useCallback)(function (currentTheme, themeProps) {
37
+ var _currentTheme = currentTheme(themeProps),
38
+ buttonStyles = _currentTheme.buttonStyles,
39
+ rest = (0, _objectWithoutProperties2.default)(_currentTheme, _excluded);
40
+ return _objectSpread({
41
+ buttonStyles: _objectSpread(_objectSpread({}, buttonStyles), {}, {
42
+ height: '100%',
43
+ '& svg': {
44
+ transform: props.expanded ? 'transform: rotate(90deg);' : 'transform: rotate(0deg);',
45
+ transition: "transform 0.2s ".concat(_editorSharedStyles.akEditorSwoopCubicBezier, ";")
46
+ }
47
+ })
48
+ }, rest);
49
+ }, [props]);
50
+ return (0, _react2.jsx)(_customThemeButton.default, {
51
+ appearance: "subtle",
52
+ className: _styles.expandClassNames.iconContainer,
53
+ iconBefore: (0, _react2.jsx)(_chevronRight.default, {
54
+ label: ''
55
+ }),
56
+ shouldFitContainer: true,
57
+ theme: useTheme,
58
+ "aria-expanded": props.expanded,
59
+ isDisabled: !props.allowInteractiveExpand
60
+ });
61
+ };
62
+ var ButtonWithTooltip = withTooltip(ExpandButtonInner);
63
+ var ButtonWithoutTooltip = ExpandButtonInner;
64
+ var ExpandButton = exports.ExpandButton = function ExpandButton(props) {
65
+ var expanded = props.expanded,
66
+ intl = props.intl;
67
+ var message = expanded ? _ui.expandMessages.collapseNode : _ui.expandMessages.expandNode;
68
+ var label = intl && intl.formatMessage(message) || message.defaultMessage;
69
+ // check to ensure device supports any-hover
70
+ var supportsAnyHover = !!window.matchMedia ? window.matchMedia('(any-hover: hover)').matches !== window.matchMedia('(any-hover: none)').matches : false;
71
+ var hoverEventCheck = supportsAnyHover ? window.matchMedia('(any-hover: hover)').matches : true;
72
+
73
+ // hoverEventCheck is to disable tooltips for mobile to prevent incorrect hover state causing issues on iOS
74
+ if (props.allowInteractiveExpand && hoverEventCheck) {
75
+ return (0, _react2.jsx)(ButtonWithTooltip, (0, _extends2.default)({
76
+ label: label
77
+ }, props));
78
+ }
79
+ return (
80
+ // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
81
+ (0, _react2.jsx)("div", {
82
+ css: _ui.expandLayoutWrapperStyle
83
+ }, (0, _react2.jsx)(ButtonWithoutTooltip, (0, _extends2.default)({
84
+ label: label
85
+ }, props)))
86
+ );
87
+ };
@@ -0,0 +1,59 @@
1
+ "use strict";
2
+
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
+ Object.defineProperty(exports, "__esModule", {
5
+ value: true
6
+ });
7
+ exports.toDOM = exports.renderIcon = exports.buildExpandClassName = void 0;
8
+ var _react = _interopRequireDefault(require("react"));
9
+ var _reactDom = _interopRequireDefault(require("react-dom"));
10
+ var _styles = require("@atlaskit/editor-common/styles");
11
+ var _ui = require("@atlaskit/editor-common/ui");
12
+ var _ExpandButton = require("../ui/ExpandButton");
13
+ // TODO: https://product-fabric.atlassian.net/browse/ED-22841
14
+ var buildExpandClassName = exports.buildExpandClassName = function buildExpandClassName(type) {
15
+ return "".concat(_styles.expandClassNames.prefix, " ").concat(_styles.expandClassNames.type(type), "\n ").concat(_styles.expandClassNames.expanded);
16
+ };
17
+ var toDOM = exports.toDOM = function toDOM(node, __livePage, intl) {
18
+ return ['div', {
19
+ // prettier-ignore
20
+ 'class': buildExpandClassName(node.type.name),
21
+ 'data-node-type': node.type.name,
22
+ 'data-title': node.attrs.title
23
+ }, ['div', {
24
+ // prettier-ignore
25
+ 'class': _styles.expandClassNames.titleContainer,
26
+ contenteditable: 'false',
27
+ // Element gains access to focus events.
28
+ // This is needed to prevent PM gaining access
29
+ // on interacting with our controls.
30
+ tabindex: '-1'
31
+ },
32
+ // prettier-ignore
33
+ ['div', {
34
+ 'class': _styles.expandClassNames.icon
35
+ }], ['div', {
36
+ // prettier-ignore
37
+ 'class': _styles.expandClassNames.inputContainer
38
+ }, ['input', {
39
+ // prettier-ignore
40
+ 'class': _styles.expandClassNames.titleInput,
41
+ value: node.attrs.title,
42
+ placeholder: intl && intl.formatMessage(_ui.expandMessages.expandPlaceholderText) || _ui.expandMessages.expandPlaceholderText.defaultMessage,
43
+ type: 'text'
44
+ }]]],
45
+ // prettier-ignore
46
+ ['div', {
47
+ 'class': _styles.expandClassNames.content
48
+ }, 0]];
49
+ };
50
+ var renderIcon = exports.renderIcon = function renderIcon(icon, allowInteractiveExpand, intl, node) {
51
+ if (!icon) {
52
+ return;
53
+ }
54
+ _reactDom.default.render( /*#__PURE__*/_react.default.createElement(_ExpandButton.ExpandButton, {
55
+ intl: intl,
56
+ allowInteractiveExpand: allowInteractiveExpand,
57
+ expanded: true // TO-DO https://product-fabric.atlassian.net/browse/ED-22841
58
+ }), icon);
59
+ };
@@ -0,0 +1,35 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ Object.defineProperty(exports, "findExpand", {
7
+ enumerable: true,
8
+ get: function get() {
9
+ return _transforms.findExpand;
10
+ }
11
+ });
12
+ exports.findParentExpandNode = void 0;
13
+ Object.defineProperty(exports, "transformSliceNestedExpandToExpand", {
14
+ enumerable: true,
15
+ get: function get() {
16
+ return _transforms.transformSliceNestedExpandToExpand;
17
+ }
18
+ });
19
+ Object.defineProperty(exports, "transformSliceToRemoveOpenExpand", {
20
+ enumerable: true,
21
+ get: function get() {
22
+ return _transforms.transformSliceToRemoveOpenExpand;
23
+ }
24
+ });
25
+ Object.defineProperty(exports, "transformSliceToRemoveOpenNestedExpand", {
26
+ enumerable: true,
27
+ get: function get() {
28
+ return _transforms.transformSliceToRemoveOpenNestedExpand;
29
+ }
30
+ });
31
+ var _utils = require("@atlaskit/editor-prosemirror/utils");
32
+ var _transforms = require("@atlaskit/editor-common/transforms");
33
+ var findParentExpandNode = exports.findParentExpandNode = function findParentExpandNode(state) {
34
+ return (0, _utils.findParentNodeOfType)(state.schema.nodes.expand)(state.selection) || (0, _utils.findParentNodeOfType)(state.schema.nodes.nestedExpand)(state.selection);
35
+ };
@@ -1,3 +1 @@
1
- // TODO: Handle type exports for singlePlayerExpandPlugin when they're created
2
- // https://product-fabric.atlassian.net/browse/ED-22840
3
1
  export { expandPlugin } from './plugin';
@@ -1,8 +1,7 @@
1
1
  import { backspace, bindKeymapWithCommand, moveDown, moveLeft, moveRight, moveUp, tab } from '@atlaskit/editor-common/keymaps';
2
2
  import { GapCursorSelection, RelativeSelectionPos, Side } from '@atlaskit/editor-common/selection';
3
3
  import { expandClassNames } from '@atlaskit/editor-common/styles';
4
- import { isPositionNearTableRow } from '@atlaskit/editor-common/utils';
5
- import { isEmptyNode } from '@atlaskit/editor-common/utils';
4
+ import { isEmptyNode, isPositionNearTableRow } from '@atlaskit/editor-common/utils';
6
5
  import { keymap } from '@atlaskit/editor-prosemirror/keymap';
7
6
  import { NodeSelection, Selection, TextSelection } from '@atlaskit/editor-prosemirror/state';
8
7
  import { getBooleanFF } from '@atlaskit/platform-feature-flags';
@@ -0,0 +1,118 @@
1
+ import { SetAttrsStep } from '@atlaskit/adf-schema/steps';
2
+ import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
3
+ import { findExpand } from '@atlaskit/editor-common/transforms';
4
+ import { createWrapSelectionTransaction } from '@atlaskit/editor-common/utils';
5
+ import { Selection } from '@atlaskit/editor-prosemirror/state';
6
+ import { safeInsert } from '@atlaskit/editor-prosemirror/utils';
7
+ import { findTable } from '@atlaskit/editor-tables/utils';
8
+
9
+ // Creates either an expand or a nestedExpand node based on the current selection
10
+ export const createExpandNode = state => {
11
+ const {
12
+ expand,
13
+ nestedExpand
14
+ } = state.schema.nodes;
15
+ const expandType = findTable(state.selection) ? nestedExpand : expand;
16
+ return expandType.createAndFill({});
17
+ };
18
+ export const insertExpand = editorAnalyticsAPI => (state, dispatch) => {
19
+ const expandNode = createExpandNode(state);
20
+ if (!expandNode) {
21
+ return false;
22
+ }
23
+ const tr = state.selection.empty ? safeInsert(expandNode)(state.tr).scrollIntoView() : createWrapSelectionTransaction({
24
+ state,
25
+ type: expandNode.type
26
+ });
27
+ const payload = {
28
+ action: ACTION.INSERTED,
29
+ actionSubject: ACTION_SUBJECT.DOCUMENT,
30
+ actionSubjectId: (expandNode === null || expandNode === void 0 ? void 0 : expandNode.type) === state.schema.nodes.expand ? ACTION_SUBJECT_ID.EXPAND : ACTION_SUBJECT_ID.NESTED_EXPAND,
31
+ attributes: {
32
+ inputMethod: INPUT_METHOD.INSERT_MENU
33
+ },
34
+ eventType: EVENT_TYPE.TRACK
35
+ };
36
+ if (dispatch && expandNode) {
37
+ editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 ? void 0 : editorAnalyticsAPI.attachAnalyticsEvent(payload)(tr);
38
+ dispatch(tr);
39
+ }
40
+ return true;
41
+ };
42
+ export const deleteExpand = editorAnalyticsAPI => (state, dispatch) => {
43
+ const expandNode = findExpand(state);
44
+ if (!expandNode) {
45
+ return false;
46
+ }
47
+ return deleteExpandAtPos(editorAnalyticsAPI)(expandNode.pos, expandNode.node)(state, dispatch);
48
+ };
49
+ export const deleteExpandAtPos = editorAnalyticsAPI => (expandNodePos, expandNode) => (state, dispatch) => {
50
+ if (!expandNode || isNaN(expandNodePos)) {
51
+ return false;
52
+ }
53
+ const payload = {
54
+ action: ACTION.DELETED,
55
+ actionSubject: expandNode.type === state.schema.nodes.expand ? ACTION_SUBJECT.EXPAND : ACTION_SUBJECT.NESTED_EXPAND,
56
+ attributes: {
57
+ inputMethod: INPUT_METHOD.TOOLBAR
58
+ },
59
+ eventType: EVENT_TYPE.TRACK
60
+ };
61
+ if (expandNode && dispatch) {
62
+ const {
63
+ tr
64
+ } = state;
65
+ tr.delete(expandNodePos, expandNodePos + expandNode.nodeSize);
66
+ editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 ? void 0 : editorAnalyticsAPI.attachAnalyticsEvent(payload)(tr);
67
+ dispatch(tr);
68
+ }
69
+ return true;
70
+ };
71
+
72
+ // Used to clear any node or cell selection when expand title is focused
73
+ export const setSelectionInsideExpand = expandPos => (state, dispatch, editorView) => {
74
+ if (editorView) {
75
+ if (!editorView.hasFocus()) {
76
+ editorView.focus();
77
+ }
78
+ const sel = Selection.findFrom(editorView.state.doc.resolve(expandPos), 1, true);
79
+ if (sel && dispatch) {
80
+ dispatch(editorView.state.tr.setSelection(sel));
81
+ }
82
+ return true;
83
+ }
84
+ return false;
85
+ };
86
+ export const updateExpandTitle = ({
87
+ title,
88
+ nodeType,
89
+ pos
90
+ }) => (state, dispatch) => {
91
+ const node = state.doc.nodeAt(pos);
92
+ if (node && node.type === nodeType && dispatch) {
93
+ const {
94
+ tr
95
+ } = state;
96
+ tr.step(new SetAttrsStep(pos, {
97
+ ...node.attrs,
98
+ title
99
+ }));
100
+ dispatch(tr);
101
+ }
102
+ return true;
103
+ };
104
+ export const focusTitle = pos => (state, dispatch, editorView) => {
105
+ if (editorView) {
106
+ const dom = editorView.domAtPos(pos);
107
+ const expandWrapper = dom.node.parentElement;
108
+ if (expandWrapper) {
109
+ setSelectionInsideExpand(pos)(state, dispatch, editorView);
110
+ const input = expandWrapper.querySelector('input');
111
+ if (input) {
112
+ input.focus();
113
+ return true;
114
+ }
115
+ }
116
+ }
117
+ return false;
118
+ };