@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.
- package/CHANGELOG.md +6 -0
- package/dist/cjs/singlePlayerExpand/commands.js +134 -0
- package/dist/cjs/singlePlayerExpand/node-views/index.js +381 -0
- package/dist/cjs/singlePlayerExpand/plugin.js +72 -9
- package/dist/cjs/singlePlayerExpand/pm-plugins/keymap.js +121 -0
- package/dist/cjs/singlePlayerExpand/pm-plugins/main.js +68 -0
- package/dist/cjs/singlePlayerExpand/toolbar.js +59 -0
- package/dist/cjs/singlePlayerExpand/ui/ExpandButton.js +87 -0
- package/dist/cjs/singlePlayerExpand/ui/NodeView.js +59 -0
- package/dist/cjs/singlePlayerExpand/utils.js +35 -0
- package/dist/es2019/index.js +0 -2
- package/dist/es2019/legacyExpand/pm-plugins/keymap.js +1 -2
- package/dist/es2019/singlePlayerExpand/commands.js +118 -0
- package/dist/es2019/singlePlayerExpand/node-views/index.js +370 -0
- package/dist/es2019/singlePlayerExpand/plugin.js +69 -10
- package/dist/es2019/singlePlayerExpand/pm-plugins/keymap.js +137 -0
- package/dist/es2019/singlePlayerExpand/pm-plugins/main.js +53 -0
- package/dist/es2019/singlePlayerExpand/toolbar.js +51 -0
- package/dist/es2019/singlePlayerExpand/ui/ExpandButton.js +77 -0
- package/dist/es2019/singlePlayerExpand/ui/NodeView.js +52 -0
- package/dist/es2019/singlePlayerExpand/utils.js +5 -0
- package/dist/esm/index.js +0 -2
- package/dist/esm/legacyExpand/pm-plugins/keymap.js +1 -2
- package/dist/esm/singlePlayerExpand/commands.js +128 -0
- package/dist/esm/singlePlayerExpand/node-views/index.js +373 -0
- package/dist/esm/singlePlayerExpand/plugin.js +71 -10
- package/dist/esm/singlePlayerExpand/pm-plugins/keymap.js +115 -0
- package/dist/esm/singlePlayerExpand/pm-plugins/main.js +60 -0
- package/dist/esm/singlePlayerExpand/toolbar.js +52 -0
- package/dist/esm/singlePlayerExpand/ui/ExpandButton.js +77 -0
- package/dist/esm/singlePlayerExpand/ui/NodeView.js +53 -0
- package/dist/esm/singlePlayerExpand/utils.js +5 -0
- package/dist/types/index.d.ts +1 -1
- package/dist/types/legacyExpand/nodeviews/index.d.ts +1 -1
- package/dist/types/legacyExpand/plugin.d.ts +1 -1
- package/dist/types/legacyExpand/pm-plugins/keymap.d.ts +1 -1
- package/dist/types/legacyExpand/pm-plugins/main.d.ts +2 -2
- package/dist/types/legacyExpand/pm-plugins/plugin-factory.d.ts +1 -1
- package/dist/types/legacyExpand/reducer.d.ts +1 -1
- package/dist/types/legacyExpand/toolbar.d.ts +1 -1
- package/dist/types/plugin.d.ts +1 -1
- package/dist/types/singlePlayerExpand/commands.d.ts +15 -0
- package/dist/types/singlePlayerExpand/node-views/index.d.ts +51 -0
- package/dist/types/singlePlayerExpand/plugin.d.ts +1 -1
- package/dist/types/singlePlayerExpand/pm-plugins/keymap.d.ts +6 -0
- package/dist/types/singlePlayerExpand/pm-plugins/main.d.ts +9 -0
- package/dist/types/singlePlayerExpand/toolbar.d.ts +3 -0
- package/dist/types/singlePlayerExpand/ui/ExpandButton.d.ts +13 -0
- package/dist/types/singlePlayerExpand/ui/NodeView.d.ts +5 -0
- package/dist/types/singlePlayerExpand/utils.d.ts +3 -0
- package/dist/{types-ts4.5/legacyExpand → types}/types.d.ts +1 -1
- package/dist/types-ts4.5/index.d.ts +1 -1
- package/dist/types-ts4.5/legacyExpand/nodeviews/index.d.ts +1 -1
- package/dist/types-ts4.5/legacyExpand/plugin.d.ts +1 -1
- package/dist/types-ts4.5/legacyExpand/pm-plugins/keymap.d.ts +1 -1
- package/dist/types-ts4.5/legacyExpand/pm-plugins/main.d.ts +2 -2
- package/dist/types-ts4.5/legacyExpand/pm-plugins/plugin-factory.d.ts +1 -1
- package/dist/types-ts4.5/legacyExpand/reducer.d.ts +1 -1
- package/dist/types-ts4.5/legacyExpand/toolbar.d.ts +1 -1
- package/dist/types-ts4.5/plugin.d.ts +1 -1
- package/dist/types-ts4.5/singlePlayerExpand/commands.d.ts +15 -0
- package/dist/types-ts4.5/singlePlayerExpand/node-views/index.d.ts +51 -0
- package/dist/types-ts4.5/singlePlayerExpand/plugin.d.ts +1 -1
- package/dist/types-ts4.5/singlePlayerExpand/pm-plugins/keymap.d.ts +6 -0
- package/dist/types-ts4.5/singlePlayerExpand/pm-plugins/main.d.ts +9 -0
- package/dist/types-ts4.5/singlePlayerExpand/toolbar.d.ts +3 -0
- package/dist/types-ts4.5/singlePlayerExpand/ui/ExpandButton.d.ts +13 -0
- package/dist/types-ts4.5/singlePlayerExpand/ui/NodeView.d.ts +5 -0
- package/dist/types-ts4.5/singlePlayerExpand/utils.d.ts +3 -0
- package/dist/{types/legacyExpand → types-ts4.5}/types.d.ts +1 -1
- package/package.json +1 -1
- /package/dist/cjs/{legacyExpand/types.js → types.js} +0 -0
- /package/dist/es2019/{legacyExpand/types.js → types.js} +0 -0
- /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
|
+
};
|
package/dist/es2019/index.js
CHANGED
|
@@ -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
|
+
};
|