@atlaskit/editor-plugin-decorations 3.0.1 → 3.1.0
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 +11 -0
- package/dist/cjs/decorationsPlugin.js +17 -0
- package/dist/cjs/pm-plugins/commands.js +105 -0
- package/dist/cjs/pm-plugins/main.js +9 -2
- package/dist/es2019/decorationsPlugin.js +14 -0
- package/dist/es2019/pm-plugins/commands.js +93 -0
- package/dist/es2019/pm-plugins/main.js +9 -2
- package/dist/esm/decorationsPlugin.js +17 -0
- package/dist/esm/pm-plugins/commands.js +99 -0
- package/dist/esm/pm-plugins/main.js +9 -2
- package/dist/types/decorationsPluginType.d.ts +12 -1
- package/dist/types/pm-plugins/commands.d.ts +4 -0
- package/dist/types/pm-plugins/main.d.ts +2 -2
- package/dist/types-ts4.5/decorationsPluginType.d.ts +12 -1
- package/dist/types-ts4.5/pm-plugins/commands.d.ts +4 -0
- package/dist/types-ts4.5/pm-plugins/main.d.ts +2 -2
- package/package.json +5 -2
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,16 @@
|
|
|
1
1
|
# @atlaskit/editor-plugin-decorations
|
|
2
2
|
|
|
3
|
+
## 3.1.0
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- [`f0b0ea63f59bc`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/f0b0ea63f59bc) -
|
|
8
|
+
[ux] ED-28803 Register Delete Button in block menu and add delete functionality and hover styles
|
|
9
|
+
|
|
10
|
+
### Patch Changes
|
|
11
|
+
|
|
12
|
+
- Updated dependencies
|
|
13
|
+
|
|
3
14
|
## 3.0.1
|
|
4
15
|
|
|
5
16
|
### Patch Changes
|
|
@@ -5,6 +5,8 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
5
5
|
value: true
|
|
6
6
|
});
|
|
7
7
|
exports.decorationsPlugin = void 0;
|
|
8
|
+
var _expValEqualsNoExposure = require("@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure");
|
|
9
|
+
var _commands = require("./pm-plugins/commands");
|
|
8
10
|
var _main = _interopRequireWildcard(require("./pm-plugins/main"));
|
|
9
11
|
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
|
|
10
12
|
/**
|
|
@@ -33,6 +35,21 @@ var decorationsPlugin = exports.decorationsPlugin = function decorationsPlugin()
|
|
|
33
35
|
};
|
|
34
36
|
}
|
|
35
37
|
return _main.decorationStateKey.getState(editorState);
|
|
38
|
+
},
|
|
39
|
+
commands: {
|
|
40
|
+
hoverDecoration: (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_block_menu', 'isEnabled', true) ? function (_ref) {
|
|
41
|
+
var nodeType = _ref.nodeType,
|
|
42
|
+
add = _ref.add,
|
|
43
|
+
className = _ref.className;
|
|
44
|
+
return (0, _commands.hoverDecorationCommand)({
|
|
45
|
+
nodeType: nodeType,
|
|
46
|
+
add: add,
|
|
47
|
+
className: className
|
|
48
|
+
});
|
|
49
|
+
} : undefined,
|
|
50
|
+
removeDecoration: (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_block_menu', 'isEnabled', true) ? function () {
|
|
51
|
+
return (0, _commands.removeDecorationCommand)();
|
|
52
|
+
} : undefined
|
|
36
53
|
}
|
|
37
54
|
};
|
|
38
55
|
};
|
|
@@ -0,0 +1,105 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.removeDecorationCommand = exports.hoverDecorationCommand = void 0;
|
|
7
|
+
var _state = require("@atlaskit/editor-prosemirror/state");
|
|
8
|
+
var _utils = require("@atlaskit/editor-prosemirror/utils");
|
|
9
|
+
var _view = require("@atlaskit/editor-prosemirror/view");
|
|
10
|
+
var _editorTables = require("@atlaskit/editor-tables");
|
|
11
|
+
var _utils2 = require("@atlaskit/editor-tables/utils");
|
|
12
|
+
var _main = require("./main");
|
|
13
|
+
var hoverDecorationCommand = exports.hoverDecorationCommand = function hoverDecorationCommand(_ref) {
|
|
14
|
+
var nodeType = _ref.nodeType,
|
|
15
|
+
add = _ref.add,
|
|
16
|
+
_ref$className = _ref.className,
|
|
17
|
+
className = _ref$className === void 0 ? 'danger' : _ref$className;
|
|
18
|
+
return function (_ref2) {
|
|
19
|
+
var tr = _ref2.tr;
|
|
20
|
+
var from;
|
|
21
|
+
var parentNode;
|
|
22
|
+
var decoration;
|
|
23
|
+
if (tr.selection instanceof _state.NodeSelection) {
|
|
24
|
+
var selectedNode = tr.selection.node;
|
|
25
|
+
var nodeTypes = Array.isArray(nodeType) ? nodeType : [nodeType];
|
|
26
|
+
var isNodeTypeMatching = nodeTypes.indexOf(selectedNode.type) > -1;
|
|
27
|
+
// This adds danger styling if the selected node is the one that requires
|
|
28
|
+
// the decoration to be added, e.g. if a layout is selected and the user
|
|
29
|
+
// hovers over the layout's delete button.
|
|
30
|
+
if (isNodeTypeMatching) {
|
|
31
|
+
from = tr.selection.from;
|
|
32
|
+
parentNode = selectedNode;
|
|
33
|
+
}
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
// This adds danger styling if the selection is not a node selection, OR if
|
|
37
|
+
// the selected node is a child of the one that requires the decoration to
|
|
38
|
+
// be added, e.g. if a decision item is selected inside a layout and the
|
|
39
|
+
// user hovers over the layout's delete button.
|
|
40
|
+
var foundParentNode = (0, _utils.findParentNodeOfType)(nodeType)(tr.selection);
|
|
41
|
+
if (from === undefined && foundParentNode) {
|
|
42
|
+
from = foundParentNode.pos;
|
|
43
|
+
parentNode = foundParentNode.node;
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
// Note: can't use !from as from could be 0, which is falsy but valid
|
|
47
|
+
if (from === undefined || parentNode === undefined) {
|
|
48
|
+
return tr;
|
|
49
|
+
}
|
|
50
|
+
decoration = _view.Decoration.node(from, from + parentNode.nodeSize, {
|
|
51
|
+
class: className
|
|
52
|
+
}, {
|
|
53
|
+
key: 'decorationNode'
|
|
54
|
+
});
|
|
55
|
+
if (tr.selection instanceof _state.TextSelection) {
|
|
56
|
+
decoration = _view.Decoration.inline(from, tr.selection.to, {
|
|
57
|
+
class: className,
|
|
58
|
+
style: "background-color: ".concat("var(--ds-background-danger, #FFECEB)", ";")
|
|
59
|
+
}, {
|
|
60
|
+
key: 'decorationNode'
|
|
61
|
+
});
|
|
62
|
+
}
|
|
63
|
+
if (tr.selection instanceof _editorTables.CellSelection) {
|
|
64
|
+
var table = (0, _editorTables.findTable)(tr.selection);
|
|
65
|
+
if (!table) {
|
|
66
|
+
return tr;
|
|
67
|
+
}
|
|
68
|
+
var map = _editorTables.TableMap.get(table.node);
|
|
69
|
+
var rect = (0, _utils2.getSelectionRect)(tr.selection);
|
|
70
|
+
if (!map || !rect) {
|
|
71
|
+
return tr;
|
|
72
|
+
}
|
|
73
|
+
var updatedCells = map.cellsInRect(rect).map(function (x) {
|
|
74
|
+
return x + table.start;
|
|
75
|
+
});
|
|
76
|
+
var tableCellDecorations = updatedCells.map(function (pos) {
|
|
77
|
+
var cell = tr.doc.nodeAt(pos);
|
|
78
|
+
if (!cell) {
|
|
79
|
+
return;
|
|
80
|
+
}
|
|
81
|
+
return _view.Decoration.node(pos, pos + cell.nodeSize, {
|
|
82
|
+
class: className
|
|
83
|
+
}, {
|
|
84
|
+
key: 'decorationNode'
|
|
85
|
+
});
|
|
86
|
+
}).filter(function (decoration) {
|
|
87
|
+
return !!decoration;
|
|
88
|
+
});
|
|
89
|
+
decoration = _view.DecorationSet.create(tr.doc, tableCellDecorations);
|
|
90
|
+
}
|
|
91
|
+
tr.setMeta(_main.decorationStateKey, {
|
|
92
|
+
action: add ? _main.ACTIONS.DECORATION_ADD : _main.ACTIONS.DECORATION_REMOVE,
|
|
93
|
+
data: decoration
|
|
94
|
+
}).setMeta('addToHistory', false);
|
|
95
|
+
return tr;
|
|
96
|
+
};
|
|
97
|
+
};
|
|
98
|
+
var removeDecorationCommand = exports.removeDecorationCommand = function removeDecorationCommand() {
|
|
99
|
+
return function (_ref3) {
|
|
100
|
+
var tr = _ref3.tr;
|
|
101
|
+
return tr.setMeta(_main.decorationStateKey, {
|
|
102
|
+
action: _main.ACTIONS.DECORATION_REMOVE
|
|
103
|
+
});
|
|
104
|
+
};
|
|
105
|
+
};
|
|
@@ -8,6 +8,7 @@ var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
|
|
|
8
8
|
var _state = require("@atlaskit/editor-prosemirror/state");
|
|
9
9
|
var _utils = require("@atlaskit/editor-prosemirror/utils");
|
|
10
10
|
var _view = require("@atlaskit/editor-prosemirror/view");
|
|
11
|
+
var _expValEqualsNoExposure = require("@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure");
|
|
11
12
|
var decorationStateKey = exports.decorationStateKey = new _state.PluginKey('decorationPlugin');
|
|
12
13
|
var ACTIONS = exports.ACTIONS = /*#__PURE__*/function (ACTIONS) {
|
|
13
14
|
ACTIONS[ACTIONS["DECORATION_ADD"] = 0] = "DECORATION_ADD";
|
|
@@ -81,7 +82,7 @@ var _default = exports.default = function _default() {
|
|
|
81
82
|
};
|
|
82
83
|
},
|
|
83
84
|
apply: function apply(tr, pluginState) {
|
|
84
|
-
if (pluginState.decoration) {
|
|
85
|
+
if (pluginState.decoration && pluginState.decoration instanceof _view.Decoration) {
|
|
85
86
|
var mapResult = tr.mapping.mapResult(pluginState.decoration.from);
|
|
86
87
|
if (mapResult.deleted) {
|
|
87
88
|
pluginState = {
|
|
@@ -89,6 +90,9 @@ var _default = exports.default = function _default() {
|
|
|
89
90
|
};
|
|
90
91
|
}
|
|
91
92
|
}
|
|
93
|
+
if (pluginState.decoration && pluginState.decoration instanceof _view.DecorationSet && (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_block_menu', 'isEnabled', true)) {
|
|
94
|
+
pluginState.decoration = pluginState.decoration.map(tr.mapping, tr.doc);
|
|
95
|
+
}
|
|
92
96
|
var meta = tr.getMeta(decorationStateKey);
|
|
93
97
|
if (!meta) {
|
|
94
98
|
return pluginState;
|
|
@@ -112,9 +116,12 @@ var _default = exports.default = function _default() {
|
|
|
112
116
|
var doc = state.doc;
|
|
113
117
|
var _ref2 = decorationStateKey.getState(state),
|
|
114
118
|
decoration = _ref2.decoration;
|
|
115
|
-
if (decoration) {
|
|
119
|
+
if (decoration instanceof _view.Decoration) {
|
|
116
120
|
return _view.DecorationSet.create(doc, [decoration]);
|
|
117
121
|
}
|
|
122
|
+
if (decoration instanceof _view.DecorationSet && (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_block_menu', 'isEnabled', true)) {
|
|
123
|
+
return decoration;
|
|
124
|
+
}
|
|
118
125
|
return null;
|
|
119
126
|
}
|
|
120
127
|
}
|
|
@@ -1,3 +1,5 @@
|
|
|
1
|
+
import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
|
|
2
|
+
import { hoverDecorationCommand, removeDecorationCommand } from './pm-plugins/commands';
|
|
1
3
|
import decorationPlugin, { decorationStateKey, hoverDecoration, removeDecoration } from './pm-plugins/main';
|
|
2
4
|
|
|
3
5
|
/**
|
|
@@ -23,5 +25,17 @@ export const decorationsPlugin = () => ({
|
|
|
23
25
|
};
|
|
24
26
|
}
|
|
25
27
|
return decorationStateKey.getState(editorState);
|
|
28
|
+
},
|
|
29
|
+
commands: {
|
|
30
|
+
hoverDecoration: expValEqualsNoExposure('platform_editor_block_menu', 'isEnabled', true) ? ({
|
|
31
|
+
nodeType,
|
|
32
|
+
add,
|
|
33
|
+
className
|
|
34
|
+
}) => hoverDecorationCommand({
|
|
35
|
+
nodeType,
|
|
36
|
+
add,
|
|
37
|
+
className
|
|
38
|
+
}) : undefined,
|
|
39
|
+
removeDecoration: expValEqualsNoExposure('platform_editor_block_menu', 'isEnabled', true) ? () => removeDecorationCommand() : undefined
|
|
26
40
|
}
|
|
27
41
|
});
|
|
@@ -0,0 +1,93 @@
|
|
|
1
|
+
import { NodeSelection, TextSelection } from '@atlaskit/editor-prosemirror/state';
|
|
2
|
+
import { findParentNodeOfType } from '@atlaskit/editor-prosemirror/utils';
|
|
3
|
+
import { Decoration, DecorationSet } from '@atlaskit/editor-prosemirror/view';
|
|
4
|
+
import { CellSelection, findTable, TableMap } from '@atlaskit/editor-tables';
|
|
5
|
+
import { getSelectionRect } from '@atlaskit/editor-tables/utils';
|
|
6
|
+
import { ACTIONS, decorationStateKey } from './main';
|
|
7
|
+
export const hoverDecorationCommand = ({
|
|
8
|
+
nodeType,
|
|
9
|
+
add,
|
|
10
|
+
className = 'danger'
|
|
11
|
+
}) => ({
|
|
12
|
+
tr
|
|
13
|
+
}) => {
|
|
14
|
+
let from;
|
|
15
|
+
let parentNode;
|
|
16
|
+
let decoration;
|
|
17
|
+
if (tr.selection instanceof NodeSelection) {
|
|
18
|
+
const selectedNode = tr.selection.node;
|
|
19
|
+
const nodeTypes = Array.isArray(nodeType) ? nodeType : [nodeType];
|
|
20
|
+
const isNodeTypeMatching = nodeTypes.indexOf(selectedNode.type) > -1;
|
|
21
|
+
// This adds danger styling if the selected node is the one that requires
|
|
22
|
+
// the decoration to be added, e.g. if a layout is selected and the user
|
|
23
|
+
// hovers over the layout's delete button.
|
|
24
|
+
if (isNodeTypeMatching) {
|
|
25
|
+
from = tr.selection.from;
|
|
26
|
+
parentNode = selectedNode;
|
|
27
|
+
}
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
// This adds danger styling if the selection is not a node selection, OR if
|
|
31
|
+
// the selected node is a child of the one that requires the decoration to
|
|
32
|
+
// be added, e.g. if a decision item is selected inside a layout and the
|
|
33
|
+
// user hovers over the layout's delete button.
|
|
34
|
+
const foundParentNode = findParentNodeOfType(nodeType)(tr.selection);
|
|
35
|
+
if (from === undefined && foundParentNode) {
|
|
36
|
+
from = foundParentNode.pos;
|
|
37
|
+
parentNode = foundParentNode.node;
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
// Note: can't use !from as from could be 0, which is falsy but valid
|
|
41
|
+
if (from === undefined || parentNode === undefined) {
|
|
42
|
+
return tr;
|
|
43
|
+
}
|
|
44
|
+
decoration = Decoration.node(from, from + parentNode.nodeSize, {
|
|
45
|
+
class: className
|
|
46
|
+
}, {
|
|
47
|
+
key: 'decorationNode'
|
|
48
|
+
});
|
|
49
|
+
if (tr.selection instanceof TextSelection) {
|
|
50
|
+
decoration = Decoration.inline(from, tr.selection.to, {
|
|
51
|
+
class: className,
|
|
52
|
+
style: `background-color: ${"var(--ds-background-danger, #FFECEB)"};`
|
|
53
|
+
}, {
|
|
54
|
+
key: 'decorationNode'
|
|
55
|
+
});
|
|
56
|
+
}
|
|
57
|
+
if (tr.selection instanceof CellSelection) {
|
|
58
|
+
const table = findTable(tr.selection);
|
|
59
|
+
if (!table) {
|
|
60
|
+
return tr;
|
|
61
|
+
}
|
|
62
|
+
const map = TableMap.get(table.node);
|
|
63
|
+
const rect = getSelectionRect(tr.selection);
|
|
64
|
+
if (!map || !rect) {
|
|
65
|
+
return tr;
|
|
66
|
+
}
|
|
67
|
+
const updatedCells = map.cellsInRect(rect).map(x => x + table.start);
|
|
68
|
+
const tableCellDecorations = updatedCells.map(pos => {
|
|
69
|
+
const cell = tr.doc.nodeAt(pos);
|
|
70
|
+
if (!cell) {
|
|
71
|
+
return;
|
|
72
|
+
}
|
|
73
|
+
return Decoration.node(pos, pos + cell.nodeSize, {
|
|
74
|
+
class: className
|
|
75
|
+
}, {
|
|
76
|
+
key: 'decorationNode'
|
|
77
|
+
});
|
|
78
|
+
}).filter(decoration => !!decoration);
|
|
79
|
+
decoration = DecorationSet.create(tr.doc, tableCellDecorations);
|
|
80
|
+
}
|
|
81
|
+
tr.setMeta(decorationStateKey, {
|
|
82
|
+
action: add ? ACTIONS.DECORATION_ADD : ACTIONS.DECORATION_REMOVE,
|
|
83
|
+
data: decoration
|
|
84
|
+
}).setMeta('addToHistory', false);
|
|
85
|
+
return tr;
|
|
86
|
+
};
|
|
87
|
+
export const removeDecorationCommand = () => ({
|
|
88
|
+
tr
|
|
89
|
+
}) => {
|
|
90
|
+
return tr.setMeta(decorationStateKey, {
|
|
91
|
+
action: ACTIONS.DECORATION_REMOVE
|
|
92
|
+
});
|
|
93
|
+
};
|
|
@@ -2,6 +2,7 @@ import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
|
|
|
2
2
|
import { NodeSelection, PluginKey } from '@atlaskit/editor-prosemirror/state';
|
|
3
3
|
import { findParentNodeOfType } from '@atlaskit/editor-prosemirror/utils';
|
|
4
4
|
import { Decoration, DecorationSet } from '@atlaskit/editor-prosemirror/view';
|
|
5
|
+
import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
|
|
5
6
|
export const decorationStateKey = new PluginKey('decorationPlugin');
|
|
6
7
|
export let ACTIONS = /*#__PURE__*/function (ACTIONS) {
|
|
7
8
|
ACTIONS[ACTIONS["DECORATION_ADD"] = 0] = "DECORATION_ADD";
|
|
@@ -73,7 +74,7 @@ export default (() => {
|
|
|
73
74
|
decoration: undefined
|
|
74
75
|
}),
|
|
75
76
|
apply(tr, pluginState) {
|
|
76
|
-
if (pluginState.decoration) {
|
|
77
|
+
if (pluginState.decoration && pluginState.decoration instanceof Decoration) {
|
|
77
78
|
const mapResult = tr.mapping.mapResult(pluginState.decoration.from);
|
|
78
79
|
if (mapResult.deleted) {
|
|
79
80
|
pluginState = {
|
|
@@ -81,6 +82,9 @@ export default (() => {
|
|
|
81
82
|
};
|
|
82
83
|
}
|
|
83
84
|
}
|
|
85
|
+
if (pluginState.decoration && pluginState.decoration instanceof DecorationSet && expValEqualsNoExposure('platform_editor_block_menu', 'isEnabled', true)) {
|
|
86
|
+
pluginState.decoration = pluginState.decoration.map(tr.mapping, tr.doc);
|
|
87
|
+
}
|
|
84
88
|
const meta = tr.getMeta(decorationStateKey);
|
|
85
89
|
if (!meta) {
|
|
86
90
|
return pluginState;
|
|
@@ -107,9 +111,12 @@ export default (() => {
|
|
|
107
111
|
const {
|
|
108
112
|
decoration
|
|
109
113
|
} = decorationStateKey.getState(state);
|
|
110
|
-
if (decoration) {
|
|
114
|
+
if (decoration instanceof Decoration) {
|
|
111
115
|
return DecorationSet.create(doc, [decoration]);
|
|
112
116
|
}
|
|
117
|
+
if (decoration instanceof DecorationSet && expValEqualsNoExposure('platform_editor_block_menu', 'isEnabled', true)) {
|
|
118
|
+
return decoration;
|
|
119
|
+
}
|
|
113
120
|
return null;
|
|
114
121
|
}
|
|
115
122
|
}
|
|
@@ -1,3 +1,5 @@
|
|
|
1
|
+
import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
|
|
2
|
+
import { hoverDecorationCommand, removeDecorationCommand } from './pm-plugins/commands';
|
|
1
3
|
import decorationPlugin, { decorationStateKey, hoverDecoration, removeDecoration } from './pm-plugins/main';
|
|
2
4
|
|
|
3
5
|
/**
|
|
@@ -26,6 +28,21 @@ export var decorationsPlugin = function decorationsPlugin() {
|
|
|
26
28
|
};
|
|
27
29
|
}
|
|
28
30
|
return decorationStateKey.getState(editorState);
|
|
31
|
+
},
|
|
32
|
+
commands: {
|
|
33
|
+
hoverDecoration: expValEqualsNoExposure('platform_editor_block_menu', 'isEnabled', true) ? function (_ref) {
|
|
34
|
+
var nodeType = _ref.nodeType,
|
|
35
|
+
add = _ref.add,
|
|
36
|
+
className = _ref.className;
|
|
37
|
+
return hoverDecorationCommand({
|
|
38
|
+
nodeType: nodeType,
|
|
39
|
+
add: add,
|
|
40
|
+
className: className
|
|
41
|
+
});
|
|
42
|
+
} : undefined,
|
|
43
|
+
removeDecoration: expValEqualsNoExposure('platform_editor_block_menu', 'isEnabled', true) ? function () {
|
|
44
|
+
return removeDecorationCommand();
|
|
45
|
+
} : undefined
|
|
29
46
|
}
|
|
30
47
|
};
|
|
31
48
|
};
|
|
@@ -0,0 +1,99 @@
|
|
|
1
|
+
import { NodeSelection, TextSelection } from '@atlaskit/editor-prosemirror/state';
|
|
2
|
+
import { findParentNodeOfType } from '@atlaskit/editor-prosemirror/utils';
|
|
3
|
+
import { Decoration, DecorationSet } from '@atlaskit/editor-prosemirror/view';
|
|
4
|
+
import { CellSelection, findTable, TableMap } from '@atlaskit/editor-tables';
|
|
5
|
+
import { getSelectionRect } from '@atlaskit/editor-tables/utils';
|
|
6
|
+
import { ACTIONS, decorationStateKey } from './main';
|
|
7
|
+
export var hoverDecorationCommand = function hoverDecorationCommand(_ref) {
|
|
8
|
+
var nodeType = _ref.nodeType,
|
|
9
|
+
add = _ref.add,
|
|
10
|
+
_ref$className = _ref.className,
|
|
11
|
+
className = _ref$className === void 0 ? 'danger' : _ref$className;
|
|
12
|
+
return function (_ref2) {
|
|
13
|
+
var tr = _ref2.tr;
|
|
14
|
+
var from;
|
|
15
|
+
var parentNode;
|
|
16
|
+
var decoration;
|
|
17
|
+
if (tr.selection instanceof NodeSelection) {
|
|
18
|
+
var selectedNode = tr.selection.node;
|
|
19
|
+
var nodeTypes = Array.isArray(nodeType) ? nodeType : [nodeType];
|
|
20
|
+
var isNodeTypeMatching = nodeTypes.indexOf(selectedNode.type) > -1;
|
|
21
|
+
// This adds danger styling if the selected node is the one that requires
|
|
22
|
+
// the decoration to be added, e.g. if a layout is selected and the user
|
|
23
|
+
// hovers over the layout's delete button.
|
|
24
|
+
if (isNodeTypeMatching) {
|
|
25
|
+
from = tr.selection.from;
|
|
26
|
+
parentNode = selectedNode;
|
|
27
|
+
}
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
// This adds danger styling if the selection is not a node selection, OR if
|
|
31
|
+
// the selected node is a child of the one that requires the decoration to
|
|
32
|
+
// be added, e.g. if a decision item is selected inside a layout and the
|
|
33
|
+
// user hovers over the layout's delete button.
|
|
34
|
+
var foundParentNode = findParentNodeOfType(nodeType)(tr.selection);
|
|
35
|
+
if (from === undefined && foundParentNode) {
|
|
36
|
+
from = foundParentNode.pos;
|
|
37
|
+
parentNode = foundParentNode.node;
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
// Note: can't use !from as from could be 0, which is falsy but valid
|
|
41
|
+
if (from === undefined || parentNode === undefined) {
|
|
42
|
+
return tr;
|
|
43
|
+
}
|
|
44
|
+
decoration = Decoration.node(from, from + parentNode.nodeSize, {
|
|
45
|
+
class: className
|
|
46
|
+
}, {
|
|
47
|
+
key: 'decorationNode'
|
|
48
|
+
});
|
|
49
|
+
if (tr.selection instanceof TextSelection) {
|
|
50
|
+
decoration = Decoration.inline(from, tr.selection.to, {
|
|
51
|
+
class: className,
|
|
52
|
+
style: "background-color: ".concat("var(--ds-background-danger, #FFECEB)", ";")
|
|
53
|
+
}, {
|
|
54
|
+
key: 'decorationNode'
|
|
55
|
+
});
|
|
56
|
+
}
|
|
57
|
+
if (tr.selection instanceof CellSelection) {
|
|
58
|
+
var table = findTable(tr.selection);
|
|
59
|
+
if (!table) {
|
|
60
|
+
return tr;
|
|
61
|
+
}
|
|
62
|
+
var map = TableMap.get(table.node);
|
|
63
|
+
var rect = getSelectionRect(tr.selection);
|
|
64
|
+
if (!map || !rect) {
|
|
65
|
+
return tr;
|
|
66
|
+
}
|
|
67
|
+
var updatedCells = map.cellsInRect(rect).map(function (x) {
|
|
68
|
+
return x + table.start;
|
|
69
|
+
});
|
|
70
|
+
var tableCellDecorations = updatedCells.map(function (pos) {
|
|
71
|
+
var cell = tr.doc.nodeAt(pos);
|
|
72
|
+
if (!cell) {
|
|
73
|
+
return;
|
|
74
|
+
}
|
|
75
|
+
return Decoration.node(pos, pos + cell.nodeSize, {
|
|
76
|
+
class: className
|
|
77
|
+
}, {
|
|
78
|
+
key: 'decorationNode'
|
|
79
|
+
});
|
|
80
|
+
}).filter(function (decoration) {
|
|
81
|
+
return !!decoration;
|
|
82
|
+
});
|
|
83
|
+
decoration = DecorationSet.create(tr.doc, tableCellDecorations);
|
|
84
|
+
}
|
|
85
|
+
tr.setMeta(decorationStateKey, {
|
|
86
|
+
action: add ? ACTIONS.DECORATION_ADD : ACTIONS.DECORATION_REMOVE,
|
|
87
|
+
data: decoration
|
|
88
|
+
}).setMeta('addToHistory', false);
|
|
89
|
+
return tr;
|
|
90
|
+
};
|
|
91
|
+
};
|
|
92
|
+
export var removeDecorationCommand = function removeDecorationCommand() {
|
|
93
|
+
return function (_ref3) {
|
|
94
|
+
var tr = _ref3.tr;
|
|
95
|
+
return tr.setMeta(decorationStateKey, {
|
|
96
|
+
action: ACTIONS.DECORATION_REMOVE
|
|
97
|
+
});
|
|
98
|
+
};
|
|
99
|
+
};
|
|
@@ -2,6 +2,7 @@ import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
|
|
|
2
2
|
import { NodeSelection, PluginKey } from '@atlaskit/editor-prosemirror/state';
|
|
3
3
|
import { findParentNodeOfType } from '@atlaskit/editor-prosemirror/utils';
|
|
4
4
|
import { Decoration, DecorationSet } from '@atlaskit/editor-prosemirror/view';
|
|
5
|
+
import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
|
|
5
6
|
export var decorationStateKey = new PluginKey('decorationPlugin');
|
|
6
7
|
export var ACTIONS = /*#__PURE__*/function (ACTIONS) {
|
|
7
8
|
ACTIONS[ACTIONS["DECORATION_ADD"] = 0] = "DECORATION_ADD";
|
|
@@ -75,7 +76,7 @@ export default (function () {
|
|
|
75
76
|
};
|
|
76
77
|
},
|
|
77
78
|
apply: function apply(tr, pluginState) {
|
|
78
|
-
if (pluginState.decoration) {
|
|
79
|
+
if (pluginState.decoration && pluginState.decoration instanceof Decoration) {
|
|
79
80
|
var mapResult = tr.mapping.mapResult(pluginState.decoration.from);
|
|
80
81
|
if (mapResult.deleted) {
|
|
81
82
|
pluginState = {
|
|
@@ -83,6 +84,9 @@ export default (function () {
|
|
|
83
84
|
};
|
|
84
85
|
}
|
|
85
86
|
}
|
|
87
|
+
if (pluginState.decoration && pluginState.decoration instanceof DecorationSet && expValEqualsNoExposure('platform_editor_block_menu', 'isEnabled', true)) {
|
|
88
|
+
pluginState.decoration = pluginState.decoration.map(tr.mapping, tr.doc);
|
|
89
|
+
}
|
|
86
90
|
var meta = tr.getMeta(decorationStateKey);
|
|
87
91
|
if (!meta) {
|
|
88
92
|
return pluginState;
|
|
@@ -106,9 +110,12 @@ export default (function () {
|
|
|
106
110
|
var doc = state.doc;
|
|
107
111
|
var _ref2 = decorationStateKey.getState(state),
|
|
108
112
|
decoration = _ref2.decoration;
|
|
109
|
-
if (decoration) {
|
|
113
|
+
if (decoration instanceof Decoration) {
|
|
110
114
|
return DecorationSet.create(doc, [decoration]);
|
|
111
115
|
}
|
|
116
|
+
if (decoration instanceof DecorationSet && expValEqualsNoExposure('platform_editor_block_menu', 'isEnabled', true)) {
|
|
117
|
+
return decoration;
|
|
118
|
+
}
|
|
112
119
|
return null;
|
|
113
120
|
}
|
|
114
121
|
}
|
|
@@ -1,9 +1,20 @@
|
|
|
1
|
-
import type { NextEditorPlugin } from '@atlaskit/editor-common/types';
|
|
1
|
+
import type { NextEditorPlugin, EditorCommand } from '@atlaskit/editor-common/types';
|
|
2
|
+
import { type NodeType } from '@atlaskit/editor-prosemirror/model';
|
|
2
3
|
import type { DecorationState, HoverDecorationHandler, removeDecoration } from './pm-plugins/main';
|
|
4
|
+
export type HoverDecorationProps = {
|
|
5
|
+
add: boolean;
|
|
6
|
+
className?: string;
|
|
7
|
+
nodeType: NodeType | Array<NodeType>;
|
|
8
|
+
};
|
|
9
|
+
export type HoverDecorationCommand = ({ nodeType, add, className, }: HoverDecorationProps) => EditorCommand;
|
|
3
10
|
export type DecorationsPlugin = NextEditorPlugin<'decorations', {
|
|
4
11
|
actions: {
|
|
5
12
|
hoverDecoration: HoverDecorationHandler;
|
|
6
13
|
removeDecoration: typeof removeDecoration;
|
|
7
14
|
};
|
|
15
|
+
commands: {
|
|
16
|
+
hoverDecoration?: HoverDecorationCommand;
|
|
17
|
+
removeDecoration?: () => EditorCommand;
|
|
18
|
+
};
|
|
8
19
|
sharedState: DecorationState;
|
|
9
20
|
}>;
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
import type { EditorCommand } from '@atlaskit/editor-common/types';
|
|
2
|
+
import type { HoverDecorationCommand } from '../decorationsPluginType';
|
|
3
|
+
export declare const hoverDecorationCommand: HoverDecorationCommand;
|
|
4
|
+
export declare const removeDecorationCommand: () => EditorCommand;
|
|
@@ -2,7 +2,7 @@ import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
|
|
|
2
2
|
import type { Command } from '@atlaskit/editor-common/types';
|
|
3
3
|
import { type NodeType } from '@atlaskit/editor-prosemirror/model';
|
|
4
4
|
import { PluginKey } from '@atlaskit/editor-prosemirror/state';
|
|
5
|
-
import { Decoration } from '@atlaskit/editor-prosemirror/view';
|
|
5
|
+
import { Decoration, DecorationSet } from '@atlaskit/editor-prosemirror/view';
|
|
6
6
|
export declare const decorationStateKey: PluginKey<any>;
|
|
7
7
|
export declare enum ACTIONS {
|
|
8
8
|
DECORATION_ADD = 0,
|
|
@@ -11,7 +11,7 @@ export declare enum ACTIONS {
|
|
|
11
11
|
export declare const removeDecoration: Command;
|
|
12
12
|
export declare const hoverDecoration: (nodeType: NodeType | Array<NodeType>, add: boolean, className?: string) => Command;
|
|
13
13
|
export type DecorationState = {
|
|
14
|
-
decoration?: Decoration;
|
|
14
|
+
decoration?: Decoration | DecorationSet;
|
|
15
15
|
};
|
|
16
16
|
type HoverDecorationHandler = typeof hoverDecoration;
|
|
17
17
|
export type { HoverDecorationHandler };
|
|
@@ -1,9 +1,20 @@
|
|
|
1
|
-
import type { NextEditorPlugin } from '@atlaskit/editor-common/types';
|
|
1
|
+
import type { NextEditorPlugin, EditorCommand } from '@atlaskit/editor-common/types';
|
|
2
|
+
import { type NodeType } from '@atlaskit/editor-prosemirror/model';
|
|
2
3
|
import type { DecorationState, HoverDecorationHandler, removeDecoration } from './pm-plugins/main';
|
|
4
|
+
export type HoverDecorationProps = {
|
|
5
|
+
add: boolean;
|
|
6
|
+
className?: string;
|
|
7
|
+
nodeType: NodeType | Array<NodeType>;
|
|
8
|
+
};
|
|
9
|
+
export type HoverDecorationCommand = ({ nodeType, add, className, }: HoverDecorationProps) => EditorCommand;
|
|
3
10
|
export type DecorationsPlugin = NextEditorPlugin<'decorations', {
|
|
4
11
|
actions: {
|
|
5
12
|
hoverDecoration: HoverDecorationHandler;
|
|
6
13
|
removeDecoration: typeof removeDecoration;
|
|
7
14
|
};
|
|
15
|
+
commands: {
|
|
16
|
+
hoverDecoration?: HoverDecorationCommand;
|
|
17
|
+
removeDecoration?: () => EditorCommand;
|
|
18
|
+
};
|
|
8
19
|
sharedState: DecorationState;
|
|
9
20
|
}>;
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
import type { EditorCommand } from '@atlaskit/editor-common/types';
|
|
2
|
+
import type { HoverDecorationCommand } from '../decorationsPluginType';
|
|
3
|
+
export declare const hoverDecorationCommand: HoverDecorationCommand;
|
|
4
|
+
export declare const removeDecorationCommand: () => EditorCommand;
|
|
@@ -2,7 +2,7 @@ import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
|
|
|
2
2
|
import type { Command } from '@atlaskit/editor-common/types';
|
|
3
3
|
import { type NodeType } from '@atlaskit/editor-prosemirror/model';
|
|
4
4
|
import { PluginKey } from '@atlaskit/editor-prosemirror/state';
|
|
5
|
-
import { Decoration } from '@atlaskit/editor-prosemirror/view';
|
|
5
|
+
import { Decoration, DecorationSet } from '@atlaskit/editor-prosemirror/view';
|
|
6
6
|
export declare const decorationStateKey: PluginKey<any>;
|
|
7
7
|
export declare enum ACTIONS {
|
|
8
8
|
DECORATION_ADD = 0,
|
|
@@ -11,7 +11,7 @@ export declare enum ACTIONS {
|
|
|
11
11
|
export declare const removeDecoration: Command;
|
|
12
12
|
export declare const hoverDecoration: (nodeType: NodeType | Array<NodeType>, add: boolean, className?: string) => Command;
|
|
13
13
|
export type DecorationState = {
|
|
14
|
-
decoration?: Decoration;
|
|
14
|
+
decoration?: Decoration | DecorationSet;
|
|
15
15
|
};
|
|
16
16
|
type HoverDecorationHandler = typeof hoverDecoration;
|
|
17
17
|
export type { HoverDecorationHandler };
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/editor-plugin-decorations",
|
|
3
|
-
"version": "3.0
|
|
3
|
+
"version": "3.1.0",
|
|
4
4
|
"description": "Decorations plugin for @atlaskit/editor-core",
|
|
5
5
|
"author": "Atlassian Pty Ltd",
|
|
6
6
|
"license": "Apache-2.0",
|
|
@@ -23,11 +23,14 @@
|
|
|
23
23
|
},
|
|
24
24
|
"dependencies": {
|
|
25
25
|
"@atlaskit/editor-prosemirror": "7.0.0",
|
|
26
|
+
"@atlaskit/editor-tables": "^2.9.0",
|
|
26
27
|
"@atlaskit/platform-feature-flags": "^1.1.0",
|
|
28
|
+
"@atlaskit/tmp-editor-statsig": "^11.6.0",
|
|
29
|
+
"@atlaskit/tokens": "^6.0.0",
|
|
27
30
|
"@babel/runtime": "^7.0.0"
|
|
28
31
|
},
|
|
29
32
|
"peerDependencies": {
|
|
30
|
-
"@atlaskit/editor-common": "^107.
|
|
33
|
+
"@atlaskit/editor-common": "^107.29.0",
|
|
31
34
|
"react": "^18.2.0",
|
|
32
35
|
"react-dom": "^18.2.0"
|
|
33
36
|
},
|