@atlaskit/editor-plugin-text-formatting 2.3.3 → 2.4.1
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 +20 -0
- package/dist/cjs/pm-plugins/main.js +54 -10
- package/dist/cjs/ui/FloatingToolbarComponent.js +6 -7
- package/dist/cjs/ui/Toolbar/formatting-in-selection-utils.js +2 -2
- package/dist/cjs/ui/Toolbar/hooks/formatting-icons.js +1 -2
- package/dist/cjs/ui/Toolbar/hooks/use-icon-list.js +2 -10
- package/dist/cjs/ui/Toolbar/index.js +2 -2
- package/dist/cjs/ui/Toolbar/single-toolbar-buttons.js +2 -7
- package/dist/es2019/pm-plugins/main.js +35 -8
- package/dist/es2019/ui/FloatingToolbarComponent.js +6 -7
- package/dist/es2019/ui/Toolbar/formatting-in-selection-utils.js +2 -2
- package/dist/es2019/ui/Toolbar/hooks/formatting-icons.js +1 -2
- package/dist/es2019/ui/Toolbar/hooks/use-icon-list.js +2 -10
- package/dist/es2019/ui/Toolbar/index.js +2 -2
- package/dist/es2019/ui/Toolbar/single-toolbar-buttons.js +2 -7
- package/dist/esm/pm-plugins/main.js +54 -8
- package/dist/esm/ui/FloatingToolbarComponent.js +6 -7
- package/dist/esm/ui/Toolbar/formatting-in-selection-utils.js +2 -2
- package/dist/esm/ui/Toolbar/hooks/formatting-icons.js +1 -2
- package/dist/esm/ui/Toolbar/hooks/use-icon-list.js +2 -10
- package/dist/esm/ui/Toolbar/index.js +2 -2
- package/dist/esm/ui/Toolbar/single-toolbar-buttons.js +2 -7
- package/dist/types/ui/Toolbar/hooks/use-icon-list.d.ts +1 -2
- package/dist/types-ts4.5/ui/Toolbar/hooks/use-icon-list.d.ts +1 -2
- package/package.json +7 -7
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,25 @@
|
|
|
1
1
|
# @atlaskit/editor-plugin-text-formatting
|
|
2
2
|
|
|
3
|
+
## 2.4.1
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [#173846](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/173846)
|
|
8
|
+
[`852a3c0aec64b`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/852a3c0aec64b) -
|
|
9
|
+
Clean up platform_editor_controls_patch_10
|
|
10
|
+
|
|
11
|
+
## 2.4.0
|
|
12
|
+
|
|
13
|
+
### Minor Changes
|
|
14
|
+
|
|
15
|
+
- [#173138](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/173138)
|
|
16
|
+
[`62d4e3ae11127`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/62d4e3ae11127) -
|
|
17
|
+
[ux] [ED-27997] Change text formatting state to only consider whole selections active for marks
|
|
18
|
+
|
|
19
|
+
### Patch Changes
|
|
20
|
+
|
|
21
|
+
- Updated dependencies
|
|
22
|
+
|
|
3
23
|
## 2.3.3
|
|
4
24
|
|
|
5
25
|
### Patch Changes
|
|
@@ -1,28 +1,32 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
3
4
|
var _typeof = require("@babel/runtime/helpers/typeof");
|
|
4
5
|
Object.defineProperty(exports, "__esModule", {
|
|
5
6
|
value: true
|
|
6
7
|
});
|
|
7
8
|
exports.plugin = void 0;
|
|
9
|
+
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
|
8
10
|
var _keymaps = require("@atlaskit/editor-common/keymaps");
|
|
9
11
|
var _mark = require("@atlaskit/editor-common/mark");
|
|
10
12
|
var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
|
|
11
13
|
var _utils = require("@atlaskit/editor-common/utils");
|
|
12
14
|
var _commands = require("@atlaskit/editor-prosemirror/commands");
|
|
15
|
+
var _model = require("@atlaskit/editor-prosemirror/model");
|
|
13
16
|
var _state = require("@atlaskit/editor-prosemirror/state");
|
|
14
17
|
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
|
|
18
|
+
var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
|
|
15
19
|
var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
|
|
16
20
|
var _textFormatting = _interopRequireWildcard(require("../editor-commands/text-formatting"));
|
|
17
21
|
var commands = _textFormatting;
|
|
18
22
|
var _pluginKey = require("./plugin-key");
|
|
19
23
|
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); }
|
|
20
|
-
|
|
24
|
+
function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t.return || t.return(); } finally { if (u) throw o; } } }; }
|
|
25
|
+
function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
|
|
26
|
+
function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; } // TODO: ED-26962 - Ideally this should use the custom toggleMark function from @atlaskit/editor-common so we also disable the options when selecting inline nodes but it disables the marks when the selection is empty at this point in time which is undesirable
|
|
21
27
|
// import { toggleMark } from '@atlaskit/editor-common/mark';
|
|
22
|
-
|
|
23
28
|
// Ignored via go/ees005
|
|
24
29
|
// eslint-disable-next-line import/no-namespace
|
|
25
|
-
|
|
26
30
|
var isSelectionInlineCursor = function isSelectionInlineCursor(selection) {
|
|
27
31
|
if (selection instanceof _state.NodeSelection) {
|
|
28
32
|
return true;
|
|
@@ -34,12 +38,9 @@ var checkNodeSelection = function checkNodeSelection(mark, editorState, type) {
|
|
|
34
38
|
if (isSelectionInlineCursor(selection)) {
|
|
35
39
|
return false;
|
|
36
40
|
}
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
})(editorState);
|
|
41
|
-
}
|
|
42
|
-
return (0, _commands.toggleMark)(mark)(editorState);
|
|
41
|
+
return (0, _commands.toggleMark)(mark, {
|
|
42
|
+
type: type
|
|
43
|
+
})(editorState);
|
|
43
44
|
};
|
|
44
45
|
var getTextFormattingState = function getTextFormattingState(editorState, editorAnalyticsAPI) {
|
|
45
46
|
var _editorState$schema$m = editorState.schema.marks,
|
|
@@ -52,6 +53,49 @@ var getTextFormattingState = function getTextFormattingState(editorState, editor
|
|
|
52
53
|
var state = {
|
|
53
54
|
isInitialised: true
|
|
54
55
|
};
|
|
56
|
+
var showOnlyCommonMarks = (0, _expValEquals.expValEquals)('platform_editor_controls', 'cohort', 'variant1') && (0, _platformFeatureFlags.fg)('platform_editor_common_marks');
|
|
57
|
+
if (showOnlyCommonMarks) {
|
|
58
|
+
// Code marks will disable all other formatting options when they are included in a
|
|
59
|
+
// selection but (for now) we do not want to make it behave differently in regards to which
|
|
60
|
+
// toolbar items are highlighted on selection. We need to track code in selection seperately
|
|
61
|
+
// to ensure all other formatting options are disabled appropriately.
|
|
62
|
+
if (code) {
|
|
63
|
+
state.codeInSelection = (0, _mark.anyMarkActive)(editorState, code.create());
|
|
64
|
+
}
|
|
65
|
+
var marks = [[code, 'code'], [em, 'em'], [strike, 'strike'], [strong, 'strong'], [underline, 'underline'], [subsup === null || subsup === void 0 ? void 0 : subsup.create({
|
|
66
|
+
type: 'sub'
|
|
67
|
+
}), 'subscript'], [subsup === null || subsup === void 0 ? void 0 : subsup.create({
|
|
68
|
+
type: 'sup'
|
|
69
|
+
}), 'superscript']].filter(function (_ref) {
|
|
70
|
+
var _ref2 = (0, _slicedToArray2.default)(_ref, 1),
|
|
71
|
+
mark = _ref2[0];
|
|
72
|
+
return mark;
|
|
73
|
+
});
|
|
74
|
+
var marksToName = new Map(marks);
|
|
75
|
+
var activeMarks = (0, _mark.wholeSelectionHasMarks)(editorState, Array.from(marksToName.keys()));
|
|
76
|
+
var _iterator = _createForOfIteratorHelper(marks),
|
|
77
|
+
_step;
|
|
78
|
+
try {
|
|
79
|
+
for (_iterator.s(); !(_step = _iterator.n()).done;) {
|
|
80
|
+
var _step$value = (0, _slicedToArray2.default)(_step.value, 2),
|
|
81
|
+
mark = _step$value[0],
|
|
82
|
+
markName = _step$value[1];
|
|
83
|
+
var active = activeMarks.get(mark);
|
|
84
|
+
if (active !== undefined) {
|
|
85
|
+
state["".concat(markName, "Active")] = active;
|
|
86
|
+
}
|
|
87
|
+
state["".concat(markName, "Disabled")] =
|
|
88
|
+
// Disable when code is active, except for code itself which should not be disabled
|
|
89
|
+
// when code is in selection 😅
|
|
90
|
+
state.codeInSelection && markName !== 'code' ? true : !checkNodeSelection(mark instanceof _model.MarkType ? mark : mark.type, editorState);
|
|
91
|
+
}
|
|
92
|
+
} catch (err) {
|
|
93
|
+
_iterator.e(err);
|
|
94
|
+
} finally {
|
|
95
|
+
_iterator.f();
|
|
96
|
+
}
|
|
97
|
+
return state;
|
|
98
|
+
}
|
|
55
99
|
if (code) {
|
|
56
100
|
state.codeActive = (0, _mark.anyMarkActive)(editorState, code.create());
|
|
57
101
|
state.codeDisabled = !checkNodeSelection(code, editorState);
|
|
@@ -76,8 +120,8 @@ var getTextFormattingState = function getTextFormattingState(editorState, editor
|
|
|
76
120
|
type: 'sup'
|
|
77
121
|
});
|
|
78
122
|
state.subscriptActive = (0, _mark.anyMarkActive)(editorState, subMark);
|
|
79
|
-
state.subscriptDisabled = state.codeActive ? true : !checkNodeSelection(subsup, editorState, 'sub');
|
|
80
123
|
state.superscriptActive = (0, _mark.anyMarkActive)(editorState, supMark);
|
|
124
|
+
state.subscriptDisabled = state.codeActive ? true : !checkNodeSelection(subsup, editorState, 'sub');
|
|
81
125
|
state.superscriptDisabled = state.codeActive ? true : !checkNodeSelection(subsup, editorState, 'sup');
|
|
82
126
|
}
|
|
83
127
|
if (underline) {
|
|
@@ -127,16 +127,16 @@ var FloatingToolbarTextFormat = function FloatingToolbarTextFormat(_ref) {
|
|
|
127
127
|
var formattingIsPresent = textFormattingState.formattingIsPresent,
|
|
128
128
|
formattingIconState = (0, _objectWithoutProperties2.default)(textFormattingState, _excluded);
|
|
129
129
|
var hasMultiplePartsWithFormattingSelected;
|
|
130
|
-
var commonActiveMarks
|
|
130
|
+
var commonActiveMarks;
|
|
131
131
|
if ((0, _experiments.editorExperiment)('platform_editor_controls', 'variant1')) {
|
|
132
132
|
var selection = editorView.state.selection;
|
|
133
133
|
var from = selection.from,
|
|
134
134
|
to = selection.to;
|
|
135
135
|
var selectedContent = selection instanceof _state.TextSelection ? editorView.state.doc.slice(from, to).content.content.slice() : undefined;
|
|
136
|
-
hasMultiplePartsWithFormattingSelected = (0, _formattingInSelectionUtils.hasMultiplePartsWithFormattingInSelection)({
|
|
136
|
+
hasMultiplePartsWithFormattingSelected = (0, _platformFeatureFlags.fg)('platform_editor_common_marks') ? false : (0, _formattingInSelectionUtils.hasMultiplePartsWithFormattingInSelection)({
|
|
137
137
|
selectedContent: selectedContent
|
|
138
138
|
});
|
|
139
|
-
if ((0, _platformFeatureFlags.fg)('
|
|
139
|
+
if (!(0, _platformFeatureFlags.fg)('platform_editor_common_marks')) {
|
|
140
140
|
commonActiveMarks = (0, _formattingInSelectionUtils.getCommonActiveMarks)({
|
|
141
141
|
selectedContent: selectedContent
|
|
142
142
|
});
|
|
@@ -149,13 +149,12 @@ var FloatingToolbarTextFormat = function FloatingToolbarTextFormat(_ref) {
|
|
|
149
149
|
editorAnalyticsAPI: editorAnalyticsAPI,
|
|
150
150
|
textFormattingState: formattingIconState,
|
|
151
151
|
toolbarType: FloatingToolbarSettings.toolbarType,
|
|
152
|
-
hasMultiplePartsWithFormattingSelected: (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1')
|
|
153
|
-
commonActiveMarks: (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1')
|
|
152
|
+
hasMultiplePartsWithFormattingSelected: (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') ? hasMultiplePartsWithFormattingSelected : undefined,
|
|
153
|
+
commonActiveMarks: (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') ? commonActiveMarks : undefined
|
|
154
154
|
});
|
|
155
155
|
var _useIconList = (0, _useIconList2.useIconList)({
|
|
156
156
|
icons: defaultIcons,
|
|
157
|
-
iconTypeList: _constants.ToolbarButtonsStrong
|
|
158
|
-
shouldUnselect: hasMultiplePartsWithFormattingSelected
|
|
157
|
+
iconTypeList: _constants.ToolbarButtonsStrong
|
|
159
158
|
}),
|
|
160
159
|
dropdownItems = _useIconList.dropdownItems,
|
|
161
160
|
singleItems = _useIconList.singleItems;
|
|
@@ -24,6 +24,8 @@ var hasMultiplePartsWithFormattingInSelection = exports.hasMultiplePartsWithForm
|
|
|
24
24
|
var allPartsHaveFormatting = contentWithMarks.length === selectedContent.length;
|
|
25
25
|
return hasFormatting && (!allPartsHaveFormatting || contentWithMarks.length > 1);
|
|
26
26
|
};
|
|
27
|
+
|
|
28
|
+
// Clean up when platform_editor_common_marks is removed
|
|
27
29
|
var getCommonActiveMarks = exports.getCommonActiveMarks = function getCommonActiveMarks(_ref2) {
|
|
28
30
|
var selectedContent = _ref2.selectedContent;
|
|
29
31
|
if (!selectedContent || selectedContent.length === 0) {
|
|
@@ -34,12 +36,10 @@ var getCommonActiveMarks = exports.getCommonActiveMarks = function getCommonActi
|
|
|
34
36
|
var _child$text;
|
|
35
37
|
return ((_child$text = child.text) === null || _child$text === void 0 ? void 0 : _child$text.trim()) !== '';
|
|
36
38
|
});
|
|
37
|
-
|
|
38
39
|
// find the active mark type in first part
|
|
39
40
|
var firstPartMarks = selectedContent[0].marks.map(function (mark) {
|
|
40
41
|
return mark.type.name;
|
|
41
42
|
});
|
|
42
|
-
|
|
43
43
|
// check if all other parts have the same mark type as the first part and return the common mark types
|
|
44
44
|
var commonMarkTypes = firstPartMarks.filter(function (mark) {
|
|
45
45
|
return filteredSelectedContent.every(function (child) {
|
|
@@ -18,7 +18,6 @@ var _textBoldEditorBold = _interopRequireDefault(require("@atlaskit/icon/core/mi
|
|
|
18
18
|
var _textItalicEditorItalic = _interopRequireDefault(require("@atlaskit/icon/core/migration/text-italic--editor-italic"));
|
|
19
19
|
var _textStrikethrough = _interopRequireDefault(require("@atlaskit/icon/core/text-strikethrough"));
|
|
20
20
|
var _textUnderline = _interopRequireDefault(require("@atlaskit/icon/core/text-underline"));
|
|
21
|
-
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
|
|
22
21
|
var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
|
|
23
22
|
var _commands = require("../../../pm-plugins/commands");
|
|
24
23
|
var _icons = require("../icons");
|
|
@@ -191,7 +190,7 @@ var buildMenuIconState = function buildMenuIconState(iconMark, hasMultiplePartsW
|
|
|
191
190
|
hasSchemaMark: hasSchemaMark
|
|
192
191
|
};
|
|
193
192
|
}
|
|
194
|
-
var isActive = hasMultiplePartsWithFormattingSelected && !(commonActiveMarks !== null && commonActiveMarks !== void 0 && commonActiveMarks.includes(iconMark)) && (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1')
|
|
193
|
+
var isActive = hasMultiplePartsWithFormattingSelected && !(commonActiveMarks !== null && commonActiveMarks !== void 0 && commonActiveMarks.includes(iconMark)) && (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') ? false : textFormattingState === null || textFormattingState === void 0 ? void 0 : textFormattingState["".concat(iconMark, "Active")];
|
|
195
194
|
var isDisabled = textFormattingState === null || textFormattingState === void 0 ? void 0 : textFormattingState["".concat(iconMark, "Disabled")];
|
|
196
195
|
var isHidden = textFormattingState === null || textFormattingState === void 0 ? void 0 : textFormattingState["".concat(iconMark, "Hidden")];
|
|
197
196
|
return {
|
|
@@ -7,22 +7,14 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
7
7
|
exports.useIconList = void 0;
|
|
8
8
|
var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
|
|
9
9
|
var _react = require("react");
|
|
10
|
-
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
|
|
11
|
-
var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
|
|
12
10
|
var useIconList = exports.useIconList = function useIconList(_ref) {
|
|
13
11
|
var icons = _ref.icons,
|
|
14
|
-
iconTypeList = _ref.iconTypeList
|
|
15
|
-
shouldUnselect = _ref.shouldUnselect;
|
|
12
|
+
iconTypeList = _ref.iconTypeList;
|
|
16
13
|
return (0, _react.useMemo)(function () {
|
|
17
14
|
return icons.reduce(function (acc, icon) {
|
|
18
15
|
if (!icon || !icon.iconMark) {
|
|
19
16
|
return acc;
|
|
20
17
|
}
|
|
21
|
-
if (
|
|
22
|
-
// eslint-disable-next-line @atlaskit/platform/no-preconditioning
|
|
23
|
-
shouldUnselect && icon.isActive && (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') && !(0, _platformFeatureFlags.fg)('platform_editor_controls_patch_10')) {
|
|
24
|
-
icon.isActive = false;
|
|
25
|
-
}
|
|
26
18
|
var isIconSingleButton = iconTypeList.includes(icon.iconMark);
|
|
27
19
|
if (isIconSingleButton) {
|
|
28
20
|
return {
|
|
@@ -38,5 +30,5 @@ var useIconList = exports.useIconList = function useIconList(_ref) {
|
|
|
38
30
|
dropdownItems: [],
|
|
39
31
|
singleItems: []
|
|
40
32
|
});
|
|
41
|
-
}, [icons,
|
|
33
|
+
}, [icons, iconTypeList]);
|
|
42
34
|
};
|
|
@@ -169,7 +169,7 @@ var ToolbarFormatting = function ToolbarFormatting(_ref) {
|
|
|
169
169
|
}), (0, _react2.jsx)("span", {
|
|
170
170
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage
|
|
171
171
|
css: _styles.wrapperStyle
|
|
172
|
-
}, isToolbarDisabled && !(
|
|
172
|
+
}, isToolbarDisabled && !(0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') ? (0, _react2.jsx)("div", null, (0, _react2.jsx)(_moreButton.MoreButton, {
|
|
173
173
|
label: moreFormattingButtonLabel,
|
|
174
174
|
isReducedSpacing: isReducedSpacing,
|
|
175
175
|
isDisabled: true,
|
|
@@ -188,7 +188,7 @@ var ToolbarFormatting = function ToolbarFormatting(_ref) {
|
|
|
188
188
|
items: items,
|
|
189
189
|
intl: intl,
|
|
190
190
|
toolbarType: toolbarType,
|
|
191
|
-
isDisabled: (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1')
|
|
191
|
+
isDisabled: (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') ? isToolbarDisabled : false
|
|
192
192
|
}))), !(api !== null && api !== void 0 && api.primaryToolbar) && /* eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage */
|
|
193
193
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
|
|
194
194
|
(0, _react2.jsx)("span", {
|
|
@@ -10,7 +10,6 @@ var _react2 = require("@emotion/react");
|
|
|
10
10
|
var _styles = require("@atlaskit/editor-common/styles");
|
|
11
11
|
var _uiMenu = require("@atlaskit/editor-common/ui-menu");
|
|
12
12
|
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
|
|
13
|
-
var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
|
|
14
13
|
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); }
|
|
15
14
|
/**
|
|
16
15
|
* @jsxRuntime classic
|
|
@@ -48,15 +47,11 @@ var SingleToolbarButtons = exports.SingleToolbarButtons = /*#__PURE__*/_react.de
|
|
|
48
47
|
buttonId: item.buttonId,
|
|
49
48
|
spacing: isReducedSpacing ? 'none' : 'default',
|
|
50
49
|
onClick: onClick(item.command),
|
|
51
|
-
selected:
|
|
52
|
-
// eslint-disable-next-line @atlaskit/platform/no-preconditioning
|
|
53
|
-
hasMultiplePartsWithFormattingSelected && (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') && !(0, _platformFeatureFlags.fg)('platform_editor_controls_patch_10') ? false : item.isActive,
|
|
50
|
+
selected: item.isActive,
|
|
54
51
|
disabled: item.isDisabled,
|
|
55
52
|
title: item.tooltipElement,
|
|
56
53
|
iconBefore: item.iconElement,
|
|
57
|
-
"aria-pressed":
|
|
58
|
-
// eslint-disable-next-line @atlaskit/platform/no-preconditioning
|
|
59
|
-
hasMultiplePartsWithFormattingSelected && (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') && !(0, _platformFeatureFlags.fg)('platform_editor_controls_patch_10') ? false : item.isActive,
|
|
54
|
+
"aria-pressed": item.isActive,
|
|
60
55
|
"aria-label": (_item$ariaLabel = item['aria-label']) !== null && _item$ariaLabel !== void 0 ? _item$ariaLabel : String(item.content),
|
|
61
56
|
"aria-keyshortcuts": item['aria-keyshortcuts']
|
|
62
57
|
});
|
|
@@ -2,12 +2,14 @@
|
|
|
2
2
|
// import { toggleMark } from '@atlaskit/editor-common/mark';
|
|
3
3
|
|
|
4
4
|
import { moveLeft as keymapMoveLeft, moveRight as keymapMoveRight } from '@atlaskit/editor-common/keymaps';
|
|
5
|
-
import { anyMarkActive } from '@atlaskit/editor-common/mark';
|
|
5
|
+
import { anyMarkActive, wholeSelectionHasMarks } from '@atlaskit/editor-common/mark';
|
|
6
6
|
import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
|
|
7
7
|
import { shallowEqual } from '@atlaskit/editor-common/utils';
|
|
8
8
|
import { toggleMark } from '@atlaskit/editor-prosemirror/commands';
|
|
9
|
+
import { MarkType } from '@atlaskit/editor-prosemirror/model';
|
|
9
10
|
import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
|
|
10
11
|
import { fg } from '@atlaskit/platform-feature-flags';
|
|
12
|
+
import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
|
|
11
13
|
import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
|
|
12
14
|
import { createInlineCodeFromTextInputWithAnalytics } from '../editor-commands/text-formatting';
|
|
13
15
|
// Ignored via go/ees005
|
|
@@ -25,12 +27,9 @@ const checkNodeSelection = (mark, editorState, type) => {
|
|
|
25
27
|
if (isSelectionInlineCursor(selection)) {
|
|
26
28
|
return false;
|
|
27
29
|
}
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
})(editorState);
|
|
32
|
-
}
|
|
33
|
-
return toggleMark(mark)(editorState);
|
|
30
|
+
return toggleMark(mark, {
|
|
31
|
+
type: type
|
|
32
|
+
})(editorState);
|
|
34
33
|
};
|
|
35
34
|
const getTextFormattingState = (editorState, editorAnalyticsAPI) => {
|
|
36
35
|
const {
|
|
@@ -44,6 +43,34 @@ const getTextFormattingState = (editorState, editorAnalyticsAPI) => {
|
|
|
44
43
|
const state = {
|
|
45
44
|
isInitialised: true
|
|
46
45
|
};
|
|
46
|
+
const showOnlyCommonMarks = expValEquals('platform_editor_controls', 'cohort', 'variant1') && fg('platform_editor_common_marks');
|
|
47
|
+
if (showOnlyCommonMarks) {
|
|
48
|
+
// Code marks will disable all other formatting options when they are included in a
|
|
49
|
+
// selection but (for now) we do not want to make it behave differently in regards to which
|
|
50
|
+
// toolbar items are highlighted on selection. We need to track code in selection seperately
|
|
51
|
+
// to ensure all other formatting options are disabled appropriately.
|
|
52
|
+
if (code) {
|
|
53
|
+
state.codeInSelection = anyMarkActive(editorState, code.create());
|
|
54
|
+
}
|
|
55
|
+
const marks = [[code, 'code'], [em, 'em'], [strike, 'strike'], [strong, 'strong'], [underline, 'underline'], [subsup === null || subsup === void 0 ? void 0 : subsup.create({
|
|
56
|
+
type: 'sub'
|
|
57
|
+
}), 'subscript'], [subsup === null || subsup === void 0 ? void 0 : subsup.create({
|
|
58
|
+
type: 'sup'
|
|
59
|
+
}), 'superscript']].filter(([mark]) => mark);
|
|
60
|
+
const marksToName = new Map(marks);
|
|
61
|
+
const activeMarks = wholeSelectionHasMarks(editorState, Array.from(marksToName.keys()));
|
|
62
|
+
for (const [mark, markName] of marks) {
|
|
63
|
+
const active = activeMarks.get(mark);
|
|
64
|
+
if (active !== undefined) {
|
|
65
|
+
state[`${markName}Active`] = active;
|
|
66
|
+
}
|
|
67
|
+
state[`${markName}Disabled`] =
|
|
68
|
+
// Disable when code is active, except for code itself which should not be disabled
|
|
69
|
+
// when code is in selection 😅
|
|
70
|
+
state.codeInSelection && markName !== 'code' ? true : !checkNodeSelection(mark instanceof MarkType ? mark : mark.type, editorState);
|
|
71
|
+
}
|
|
72
|
+
return state;
|
|
73
|
+
}
|
|
47
74
|
if (code) {
|
|
48
75
|
state.codeActive = anyMarkActive(editorState, code.create());
|
|
49
76
|
state.codeDisabled = !checkNodeSelection(code, editorState);
|
|
@@ -68,8 +95,8 @@ const getTextFormattingState = (editorState, editorAnalyticsAPI) => {
|
|
|
68
95
|
type: 'sup'
|
|
69
96
|
});
|
|
70
97
|
state.subscriptActive = anyMarkActive(editorState, subMark);
|
|
71
|
-
state.subscriptDisabled = state.codeActive ? true : !checkNodeSelection(subsup, editorState, 'sub');
|
|
72
98
|
state.superscriptActive = anyMarkActive(editorState, supMark);
|
|
99
|
+
state.subscriptDisabled = state.codeActive ? true : !checkNodeSelection(subsup, editorState, 'sub');
|
|
73
100
|
state.superscriptDisabled = state.codeActive ? true : !checkNodeSelection(subsup, editorState, 'sup');
|
|
74
101
|
}
|
|
75
102
|
if (underline) {
|
|
@@ -121,7 +121,7 @@ const FloatingToolbarTextFormat = ({
|
|
|
121
121
|
...formattingIconState
|
|
122
122
|
} = textFormattingState;
|
|
123
123
|
let hasMultiplePartsWithFormattingSelected;
|
|
124
|
-
let commonActiveMarks
|
|
124
|
+
let commonActiveMarks;
|
|
125
125
|
if (editorExperiment('platform_editor_controls', 'variant1')) {
|
|
126
126
|
const {
|
|
127
127
|
selection
|
|
@@ -131,10 +131,10 @@ const FloatingToolbarTextFormat = ({
|
|
|
131
131
|
to
|
|
132
132
|
} = selection;
|
|
133
133
|
const selectedContent = selection instanceof TextSelection ? editorView.state.doc.slice(from, to).content.content.slice() : undefined;
|
|
134
|
-
hasMultiplePartsWithFormattingSelected = hasMultiplePartsWithFormattingInSelection({
|
|
134
|
+
hasMultiplePartsWithFormattingSelected = fg('platform_editor_common_marks') ? false : hasMultiplePartsWithFormattingInSelection({
|
|
135
135
|
selectedContent
|
|
136
136
|
});
|
|
137
|
-
if (fg('
|
|
137
|
+
if (!fg('platform_editor_common_marks')) {
|
|
138
138
|
commonActiveMarks = getCommonActiveMarks({
|
|
139
139
|
selectedContent
|
|
140
140
|
});
|
|
@@ -147,16 +147,15 @@ const FloatingToolbarTextFormat = ({
|
|
|
147
147
|
editorAnalyticsAPI,
|
|
148
148
|
textFormattingState: formattingIconState,
|
|
149
149
|
toolbarType: FloatingToolbarSettings.toolbarType,
|
|
150
|
-
hasMultiplePartsWithFormattingSelected: editorExperiment('platform_editor_controls', 'variant1')
|
|
151
|
-
commonActiveMarks: editorExperiment('platform_editor_controls', 'variant1')
|
|
150
|
+
hasMultiplePartsWithFormattingSelected: editorExperiment('platform_editor_controls', 'variant1') ? hasMultiplePartsWithFormattingSelected : undefined,
|
|
151
|
+
commonActiveMarks: editorExperiment('platform_editor_controls', 'variant1') ? commonActiveMarks : undefined
|
|
152
152
|
});
|
|
153
153
|
const {
|
|
154
154
|
dropdownItems,
|
|
155
155
|
singleItems
|
|
156
156
|
} = useIconList({
|
|
157
157
|
icons: defaultIcons,
|
|
158
|
-
iconTypeList: ToolbarButtonsStrong
|
|
159
|
-
shouldUnselect: hasMultiplePartsWithFormattingSelected
|
|
158
|
+
iconTypeList: ToolbarButtonsStrong
|
|
160
159
|
});
|
|
161
160
|
const clearIcon = useClearIcon({
|
|
162
161
|
formattingPluginInitialised: textFormattingState.isInitialised,
|
|
@@ -13,6 +13,8 @@ export const hasMultiplePartsWithFormattingInSelection = ({
|
|
|
13
13
|
const allPartsHaveFormatting = contentWithMarks.length === selectedContent.length;
|
|
14
14
|
return hasFormatting && (!allPartsHaveFormatting || contentWithMarks.length > 1);
|
|
15
15
|
};
|
|
16
|
+
|
|
17
|
+
// Clean up when platform_editor_common_marks is removed
|
|
16
18
|
export const getCommonActiveMarks = ({
|
|
17
19
|
selectedContent
|
|
18
20
|
}) => {
|
|
@@ -24,10 +26,8 @@ export const getCommonActiveMarks = ({
|
|
|
24
26
|
var _child$text;
|
|
25
27
|
return ((_child$text = child.text) === null || _child$text === void 0 ? void 0 : _child$text.trim()) !== '';
|
|
26
28
|
});
|
|
27
|
-
|
|
28
29
|
// find the active mark type in first part
|
|
29
30
|
const firstPartMarks = selectedContent[0].marks.map(mark => mark.type.name);
|
|
30
|
-
|
|
31
31
|
// check if all other parts have the same mark type as the first part and return the common mark types
|
|
32
32
|
const commonMarkTypes = firstPartMarks.filter(mark => filteredSelectedContent.every(child => child.marks.some(m => m.type.name === mark)));
|
|
33
33
|
return commonMarkTypes;
|
|
@@ -16,7 +16,6 @@ import BoldIcon from '@atlaskit/icon/core/migration/text-bold--editor-bold';
|
|
|
16
16
|
import ItalicIcon from '@atlaskit/icon/core/migration/text-italic--editor-italic';
|
|
17
17
|
import TextStrikethroughIcon from '@atlaskit/icon/core/text-strikethrough';
|
|
18
18
|
import UnderlineIcon from '@atlaskit/icon/core/text-underline';
|
|
19
|
-
import { fg } from '@atlaskit/platform-feature-flags';
|
|
20
19
|
import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
|
|
21
20
|
import { toggleCodeWithAnalytics, toggleEmWithAnalytics, toggleStrikeWithAnalytics, toggleStrongWithAnalytics, toggleSubscriptWithAnalytics, toggleSuperscriptWithAnalytics, toggleUnderlineWithAnalytics } from '../../../pm-plugins/commands';
|
|
22
21
|
import { Subscript, Superscript } from '../icons';
|
|
@@ -183,7 +182,7 @@ const buildMenuIconState = (iconMark, hasMultiplePartsWithFormattingSelected, co
|
|
|
183
182
|
hasSchemaMark
|
|
184
183
|
};
|
|
185
184
|
}
|
|
186
|
-
const isActive = hasMultiplePartsWithFormattingSelected && !(commonActiveMarks !== null && commonActiveMarks !== void 0 && commonActiveMarks.includes(iconMark)) && editorExperiment('platform_editor_controls', 'variant1')
|
|
185
|
+
const isActive = hasMultiplePartsWithFormattingSelected && !(commonActiveMarks !== null && commonActiveMarks !== void 0 && commonActiveMarks.includes(iconMark)) && editorExperiment('platform_editor_controls', 'variant1') ? false : textFormattingState === null || textFormattingState === void 0 ? void 0 : textFormattingState[`${iconMark}Active`];
|
|
187
186
|
const isDisabled = textFormattingState === null || textFormattingState === void 0 ? void 0 : textFormattingState[`${iconMark}Disabled`];
|
|
188
187
|
const isHidden = textFormattingState === null || textFormattingState === void 0 ? void 0 : textFormattingState[`${iconMark}Hidden`];
|
|
189
188
|
return {
|
|
@@ -1,21 +1,13 @@
|
|
|
1
1
|
import { useMemo } from 'react';
|
|
2
|
-
import { fg } from '@atlaskit/platform-feature-flags';
|
|
3
|
-
import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
|
|
4
2
|
export const useIconList = ({
|
|
5
3
|
icons,
|
|
6
|
-
iconTypeList
|
|
7
|
-
shouldUnselect
|
|
4
|
+
iconTypeList
|
|
8
5
|
}) => {
|
|
9
6
|
return useMemo(() => {
|
|
10
7
|
return icons.reduce((acc, icon) => {
|
|
11
8
|
if (!icon || !icon.iconMark) {
|
|
12
9
|
return acc;
|
|
13
10
|
}
|
|
14
|
-
if (
|
|
15
|
-
// eslint-disable-next-line @atlaskit/platform/no-preconditioning
|
|
16
|
-
shouldUnselect && icon.isActive && editorExperiment('platform_editor_controls', 'variant1') && !fg('platform_editor_controls_patch_10')) {
|
|
17
|
-
icon.isActive = false;
|
|
18
|
-
}
|
|
19
11
|
const isIconSingleButton = iconTypeList.includes(icon.iconMark);
|
|
20
12
|
if (isIconSingleButton) {
|
|
21
13
|
return {
|
|
@@ -31,5 +23,5 @@ export const useIconList = ({
|
|
|
31
23
|
dropdownItems: [],
|
|
32
24
|
singleItems: []
|
|
33
25
|
});
|
|
34
|
-
}, [icons,
|
|
26
|
+
}, [icons, iconTypeList]);
|
|
35
27
|
};
|
|
@@ -158,7 +158,7 @@ const ToolbarFormatting = ({
|
|
|
158
158
|
}), jsx("span", {
|
|
159
159
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage
|
|
160
160
|
css: wrapperStyle
|
|
161
|
-
}, isToolbarDisabled && !
|
|
161
|
+
}, isToolbarDisabled && !editorExperiment('platform_editor_controls', 'variant1') ? jsx("div", null, jsx(MoreButton, {
|
|
162
162
|
label: moreFormattingButtonLabel,
|
|
163
163
|
isReducedSpacing: isReducedSpacing,
|
|
164
164
|
isDisabled: true,
|
|
@@ -177,7 +177,7 @@ const ToolbarFormatting = ({
|
|
|
177
177
|
items: items,
|
|
178
178
|
intl: intl,
|
|
179
179
|
toolbarType: toolbarType,
|
|
180
|
-
isDisabled: editorExperiment('platform_editor_controls', 'variant1')
|
|
180
|
+
isDisabled: editorExperiment('platform_editor_controls', 'variant1') ? isToolbarDisabled : false
|
|
181
181
|
}))), !(api !== null && api !== void 0 && api.primaryToolbar) && /* eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage */
|
|
182
182
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
|
|
183
183
|
jsx("span", {
|
|
@@ -9,7 +9,6 @@ import { jsx } from '@emotion/react';
|
|
|
9
9
|
import { buttonGroupStyle, buttonGroupStyleBeforeVisualRefresh } from '@atlaskit/editor-common/styles';
|
|
10
10
|
import { ToolbarButton } from '@atlaskit/editor-common/ui-menu';
|
|
11
11
|
import { fg } from '@atlaskit/platform-feature-flags';
|
|
12
|
-
import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
|
|
13
12
|
export const SingleToolbarButtons = /*#__PURE__*/React.memo(({
|
|
14
13
|
items,
|
|
15
14
|
isReducedSpacing,
|
|
@@ -40,15 +39,11 @@ export const SingleToolbarButtons = /*#__PURE__*/React.memo(({
|
|
|
40
39
|
buttonId: item.buttonId,
|
|
41
40
|
spacing: isReducedSpacing ? 'none' : 'default',
|
|
42
41
|
onClick: onClick(item.command),
|
|
43
|
-
selected:
|
|
44
|
-
// eslint-disable-next-line @atlaskit/platform/no-preconditioning
|
|
45
|
-
hasMultiplePartsWithFormattingSelected && editorExperiment('platform_editor_controls', 'variant1') && !fg('platform_editor_controls_patch_10') ? false : item.isActive,
|
|
42
|
+
selected: item.isActive,
|
|
46
43
|
disabled: item.isDisabled,
|
|
47
44
|
title: item.tooltipElement,
|
|
48
45
|
iconBefore: item.iconElement,
|
|
49
|
-
"aria-pressed":
|
|
50
|
-
// eslint-disable-next-line @atlaskit/platform/no-preconditioning
|
|
51
|
-
hasMultiplePartsWithFormattingSelected && editorExperiment('platform_editor_controls', 'variant1') && !fg('platform_editor_controls_patch_10') ? false : item.isActive,
|
|
46
|
+
"aria-pressed": item.isActive,
|
|
52
47
|
"aria-label": (_item$ariaLabel = item['aria-label']) !== null && _item$ariaLabel !== void 0 ? _item$ariaLabel : String(item.content),
|
|
53
48
|
"aria-keyshortcuts": item['aria-keyshortcuts']
|
|
54
49
|
});
|
|
@@ -1,13 +1,19 @@
|
|
|
1
|
+
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
|
|
2
|
+
function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t.return || t.return(); } finally { if (u) throw o; } } }; }
|
|
3
|
+
function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
|
|
4
|
+
function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
|
|
1
5
|
// TODO: ED-26962 - Ideally this should use the custom toggleMark function from @atlaskit/editor-common so we also disable the options when selecting inline nodes but it disables the marks when the selection is empty at this point in time which is undesirable
|
|
2
6
|
// import { toggleMark } from '@atlaskit/editor-common/mark';
|
|
3
7
|
|
|
4
8
|
import { moveLeft as keymapMoveLeft, moveRight as keymapMoveRight } from '@atlaskit/editor-common/keymaps';
|
|
5
|
-
import { anyMarkActive } from '@atlaskit/editor-common/mark';
|
|
9
|
+
import { anyMarkActive, wholeSelectionHasMarks } from '@atlaskit/editor-common/mark';
|
|
6
10
|
import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
|
|
7
11
|
import { shallowEqual } from '@atlaskit/editor-common/utils';
|
|
8
12
|
import { toggleMark } from '@atlaskit/editor-prosemirror/commands';
|
|
13
|
+
import { MarkType } from '@atlaskit/editor-prosemirror/model';
|
|
9
14
|
import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
|
|
10
15
|
import { fg } from '@atlaskit/platform-feature-flags';
|
|
16
|
+
import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
|
|
11
17
|
import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
|
|
12
18
|
import { createInlineCodeFromTextInputWithAnalytics } from '../editor-commands/text-formatting';
|
|
13
19
|
// Ignored via go/ees005
|
|
@@ -25,12 +31,9 @@ var checkNodeSelection = function checkNodeSelection(mark, editorState, type) {
|
|
|
25
31
|
if (isSelectionInlineCursor(selection)) {
|
|
26
32
|
return false;
|
|
27
33
|
}
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
})(editorState);
|
|
32
|
-
}
|
|
33
|
-
return toggleMark(mark)(editorState);
|
|
34
|
+
return toggleMark(mark, {
|
|
35
|
+
type: type
|
|
36
|
+
})(editorState);
|
|
34
37
|
};
|
|
35
38
|
var getTextFormattingState = function getTextFormattingState(editorState, editorAnalyticsAPI) {
|
|
36
39
|
var _editorState$schema$m = editorState.schema.marks,
|
|
@@ -43,6 +46,49 @@ var getTextFormattingState = function getTextFormattingState(editorState, editor
|
|
|
43
46
|
var state = {
|
|
44
47
|
isInitialised: true
|
|
45
48
|
};
|
|
49
|
+
var showOnlyCommonMarks = expValEquals('platform_editor_controls', 'cohort', 'variant1') && fg('platform_editor_common_marks');
|
|
50
|
+
if (showOnlyCommonMarks) {
|
|
51
|
+
// Code marks will disable all other formatting options when they are included in a
|
|
52
|
+
// selection but (for now) we do not want to make it behave differently in regards to which
|
|
53
|
+
// toolbar items are highlighted on selection. We need to track code in selection seperately
|
|
54
|
+
// to ensure all other formatting options are disabled appropriately.
|
|
55
|
+
if (code) {
|
|
56
|
+
state.codeInSelection = anyMarkActive(editorState, code.create());
|
|
57
|
+
}
|
|
58
|
+
var marks = [[code, 'code'], [em, 'em'], [strike, 'strike'], [strong, 'strong'], [underline, 'underline'], [subsup === null || subsup === void 0 ? void 0 : subsup.create({
|
|
59
|
+
type: 'sub'
|
|
60
|
+
}), 'subscript'], [subsup === null || subsup === void 0 ? void 0 : subsup.create({
|
|
61
|
+
type: 'sup'
|
|
62
|
+
}), 'superscript']].filter(function (_ref) {
|
|
63
|
+
var _ref2 = _slicedToArray(_ref, 1),
|
|
64
|
+
mark = _ref2[0];
|
|
65
|
+
return mark;
|
|
66
|
+
});
|
|
67
|
+
var marksToName = new Map(marks);
|
|
68
|
+
var activeMarks = wholeSelectionHasMarks(editorState, Array.from(marksToName.keys()));
|
|
69
|
+
var _iterator = _createForOfIteratorHelper(marks),
|
|
70
|
+
_step;
|
|
71
|
+
try {
|
|
72
|
+
for (_iterator.s(); !(_step = _iterator.n()).done;) {
|
|
73
|
+
var _step$value = _slicedToArray(_step.value, 2),
|
|
74
|
+
mark = _step$value[0],
|
|
75
|
+
markName = _step$value[1];
|
|
76
|
+
var active = activeMarks.get(mark);
|
|
77
|
+
if (active !== undefined) {
|
|
78
|
+
state["".concat(markName, "Active")] = active;
|
|
79
|
+
}
|
|
80
|
+
state["".concat(markName, "Disabled")] =
|
|
81
|
+
// Disable when code is active, except for code itself which should not be disabled
|
|
82
|
+
// when code is in selection 😅
|
|
83
|
+
state.codeInSelection && markName !== 'code' ? true : !checkNodeSelection(mark instanceof MarkType ? mark : mark.type, editorState);
|
|
84
|
+
}
|
|
85
|
+
} catch (err) {
|
|
86
|
+
_iterator.e(err);
|
|
87
|
+
} finally {
|
|
88
|
+
_iterator.f();
|
|
89
|
+
}
|
|
90
|
+
return state;
|
|
91
|
+
}
|
|
46
92
|
if (code) {
|
|
47
93
|
state.codeActive = anyMarkActive(editorState, code.create());
|
|
48
94
|
state.codeDisabled = !checkNodeSelection(code, editorState);
|
|
@@ -67,8 +113,8 @@ var getTextFormattingState = function getTextFormattingState(editorState, editor
|
|
|
67
113
|
type: 'sup'
|
|
68
114
|
});
|
|
69
115
|
state.subscriptActive = anyMarkActive(editorState, subMark);
|
|
70
|
-
state.subscriptDisabled = state.codeActive ? true : !checkNodeSelection(subsup, editorState, 'sub');
|
|
71
116
|
state.superscriptActive = anyMarkActive(editorState, supMark);
|
|
117
|
+
state.subscriptDisabled = state.codeActive ? true : !checkNodeSelection(subsup, editorState, 'sub');
|
|
72
118
|
state.superscriptDisabled = state.codeActive ? true : !checkNodeSelection(subsup, editorState, 'sup');
|
|
73
119
|
}
|
|
74
120
|
if (underline) {
|
|
@@ -119,16 +119,16 @@ var FloatingToolbarTextFormat = function FloatingToolbarTextFormat(_ref) {
|
|
|
119
119
|
var formattingIsPresent = textFormattingState.formattingIsPresent,
|
|
120
120
|
formattingIconState = _objectWithoutProperties(textFormattingState, _excluded);
|
|
121
121
|
var hasMultiplePartsWithFormattingSelected;
|
|
122
|
-
var commonActiveMarks
|
|
122
|
+
var commonActiveMarks;
|
|
123
123
|
if (editorExperiment('platform_editor_controls', 'variant1')) {
|
|
124
124
|
var selection = editorView.state.selection;
|
|
125
125
|
var from = selection.from,
|
|
126
126
|
to = selection.to;
|
|
127
127
|
var selectedContent = selection instanceof TextSelection ? editorView.state.doc.slice(from, to).content.content.slice() : undefined;
|
|
128
|
-
hasMultiplePartsWithFormattingSelected = hasMultiplePartsWithFormattingInSelection({
|
|
128
|
+
hasMultiplePartsWithFormattingSelected = fg('platform_editor_common_marks') ? false : hasMultiplePartsWithFormattingInSelection({
|
|
129
129
|
selectedContent: selectedContent
|
|
130
130
|
});
|
|
131
|
-
if (fg('
|
|
131
|
+
if (!fg('platform_editor_common_marks')) {
|
|
132
132
|
commonActiveMarks = getCommonActiveMarks({
|
|
133
133
|
selectedContent: selectedContent
|
|
134
134
|
});
|
|
@@ -141,13 +141,12 @@ var FloatingToolbarTextFormat = function FloatingToolbarTextFormat(_ref) {
|
|
|
141
141
|
editorAnalyticsAPI: editorAnalyticsAPI,
|
|
142
142
|
textFormattingState: formattingIconState,
|
|
143
143
|
toolbarType: FloatingToolbarSettings.toolbarType,
|
|
144
|
-
hasMultiplePartsWithFormattingSelected: editorExperiment('platform_editor_controls', 'variant1')
|
|
145
|
-
commonActiveMarks: editorExperiment('platform_editor_controls', 'variant1')
|
|
144
|
+
hasMultiplePartsWithFormattingSelected: editorExperiment('platform_editor_controls', 'variant1') ? hasMultiplePartsWithFormattingSelected : undefined,
|
|
145
|
+
commonActiveMarks: editorExperiment('platform_editor_controls', 'variant1') ? commonActiveMarks : undefined
|
|
146
146
|
});
|
|
147
147
|
var _useIconList = useIconList({
|
|
148
148
|
icons: defaultIcons,
|
|
149
|
-
iconTypeList: ToolbarButtonsStrong
|
|
150
|
-
shouldUnselect: hasMultiplePartsWithFormattingSelected
|
|
149
|
+
iconTypeList: ToolbarButtonsStrong
|
|
151
150
|
}),
|
|
152
151
|
dropdownItems = _useIconList.dropdownItems,
|
|
153
152
|
singleItems = _useIconList.singleItems;
|
|
@@ -18,6 +18,8 @@ export var hasMultiplePartsWithFormattingInSelection = function hasMultipleParts
|
|
|
18
18
|
var allPartsHaveFormatting = contentWithMarks.length === selectedContent.length;
|
|
19
19
|
return hasFormatting && (!allPartsHaveFormatting || contentWithMarks.length > 1);
|
|
20
20
|
};
|
|
21
|
+
|
|
22
|
+
// Clean up when platform_editor_common_marks is removed
|
|
21
23
|
export var getCommonActiveMarks = function getCommonActiveMarks(_ref2) {
|
|
22
24
|
var selectedContent = _ref2.selectedContent;
|
|
23
25
|
if (!selectedContent || selectedContent.length === 0) {
|
|
@@ -28,12 +30,10 @@ export var getCommonActiveMarks = function getCommonActiveMarks(_ref2) {
|
|
|
28
30
|
var _child$text;
|
|
29
31
|
return ((_child$text = child.text) === null || _child$text === void 0 ? void 0 : _child$text.trim()) !== '';
|
|
30
32
|
});
|
|
31
|
-
|
|
32
33
|
// find the active mark type in first part
|
|
33
34
|
var firstPartMarks = selectedContent[0].marks.map(function (mark) {
|
|
34
35
|
return mark.type.name;
|
|
35
36
|
});
|
|
36
|
-
|
|
37
37
|
// check if all other parts have the same mark type as the first part and return the common mark types
|
|
38
38
|
var commonMarkTypes = firstPartMarks.filter(function (mark) {
|
|
39
39
|
return filteredSelectedContent.every(function (child) {
|
|
@@ -17,7 +17,6 @@ import BoldIcon from '@atlaskit/icon/core/migration/text-bold--editor-bold';
|
|
|
17
17
|
import ItalicIcon from '@atlaskit/icon/core/migration/text-italic--editor-italic';
|
|
18
18
|
import TextStrikethroughIcon from '@atlaskit/icon/core/text-strikethrough';
|
|
19
19
|
import UnderlineIcon from '@atlaskit/icon/core/text-underline';
|
|
20
|
-
import { fg } from '@atlaskit/platform-feature-flags';
|
|
21
20
|
import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
|
|
22
21
|
import { toggleCodeWithAnalytics, toggleEmWithAnalytics, toggleStrikeWithAnalytics, toggleStrongWithAnalytics, toggleSubscriptWithAnalytics, toggleSuperscriptWithAnalytics, toggleUnderlineWithAnalytics } from '../../../pm-plugins/commands';
|
|
23
22
|
import { Subscript, Superscript } from '../icons';
|
|
@@ -183,7 +182,7 @@ var buildMenuIconState = function buildMenuIconState(iconMark, hasMultiplePartsW
|
|
|
183
182
|
hasSchemaMark: hasSchemaMark
|
|
184
183
|
};
|
|
185
184
|
}
|
|
186
|
-
var isActive = hasMultiplePartsWithFormattingSelected && !(commonActiveMarks !== null && commonActiveMarks !== void 0 && commonActiveMarks.includes(iconMark)) && editorExperiment('platform_editor_controls', 'variant1')
|
|
185
|
+
var isActive = hasMultiplePartsWithFormattingSelected && !(commonActiveMarks !== null && commonActiveMarks !== void 0 && commonActiveMarks.includes(iconMark)) && editorExperiment('platform_editor_controls', 'variant1') ? false : textFormattingState === null || textFormattingState === void 0 ? void 0 : textFormattingState["".concat(iconMark, "Active")];
|
|
187
186
|
var isDisabled = textFormattingState === null || textFormattingState === void 0 ? void 0 : textFormattingState["".concat(iconMark, "Disabled")];
|
|
188
187
|
var isHidden = textFormattingState === null || textFormattingState === void 0 ? void 0 : textFormattingState["".concat(iconMark, "Hidden")];
|
|
189
188
|
return {
|
|
@@ -1,21 +1,13 @@
|
|
|
1
1
|
import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
|
|
2
2
|
import { useMemo } from 'react';
|
|
3
|
-
import { fg } from '@atlaskit/platform-feature-flags';
|
|
4
|
-
import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
|
|
5
3
|
export var useIconList = function useIconList(_ref) {
|
|
6
4
|
var icons = _ref.icons,
|
|
7
|
-
iconTypeList = _ref.iconTypeList
|
|
8
|
-
shouldUnselect = _ref.shouldUnselect;
|
|
5
|
+
iconTypeList = _ref.iconTypeList;
|
|
9
6
|
return useMemo(function () {
|
|
10
7
|
return icons.reduce(function (acc, icon) {
|
|
11
8
|
if (!icon || !icon.iconMark) {
|
|
12
9
|
return acc;
|
|
13
10
|
}
|
|
14
|
-
if (
|
|
15
|
-
// eslint-disable-next-line @atlaskit/platform/no-preconditioning
|
|
16
|
-
shouldUnselect && icon.isActive && editorExperiment('platform_editor_controls', 'variant1') && !fg('platform_editor_controls_patch_10')) {
|
|
17
|
-
icon.isActive = false;
|
|
18
|
-
}
|
|
19
11
|
var isIconSingleButton = iconTypeList.includes(icon.iconMark);
|
|
20
12
|
if (isIconSingleButton) {
|
|
21
13
|
return {
|
|
@@ -31,5 +23,5 @@ export var useIconList = function useIconList(_ref) {
|
|
|
31
23
|
dropdownItems: [],
|
|
32
24
|
singleItems: []
|
|
33
25
|
});
|
|
34
|
-
}, [icons,
|
|
26
|
+
}, [icons, iconTypeList]);
|
|
35
27
|
};
|
|
@@ -163,7 +163,7 @@ var ToolbarFormatting = function ToolbarFormatting(_ref) {
|
|
|
163
163
|
}), jsx("span", {
|
|
164
164
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage
|
|
165
165
|
css: wrapperStyle
|
|
166
|
-
}, isToolbarDisabled && !
|
|
166
|
+
}, isToolbarDisabled && !editorExperiment('platform_editor_controls', 'variant1') ? jsx("div", null, jsx(MoreButton, {
|
|
167
167
|
label: moreFormattingButtonLabel,
|
|
168
168
|
isReducedSpacing: isReducedSpacing,
|
|
169
169
|
isDisabled: true,
|
|
@@ -182,7 +182,7 @@ var ToolbarFormatting = function ToolbarFormatting(_ref) {
|
|
|
182
182
|
items: items,
|
|
183
183
|
intl: intl,
|
|
184
184
|
toolbarType: toolbarType,
|
|
185
|
-
isDisabled: editorExperiment('platform_editor_controls', 'variant1')
|
|
185
|
+
isDisabled: editorExperiment('platform_editor_controls', 'variant1') ? isToolbarDisabled : false
|
|
186
186
|
}))), !(api !== null && api !== void 0 && api.primaryToolbar) && /* eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage */
|
|
187
187
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
|
|
188
188
|
jsx("span", {
|
|
@@ -9,7 +9,6 @@ import { jsx } from '@emotion/react';
|
|
|
9
9
|
import { buttonGroupStyle, buttonGroupStyleBeforeVisualRefresh } from '@atlaskit/editor-common/styles';
|
|
10
10
|
import { ToolbarButton } from '@atlaskit/editor-common/ui-menu';
|
|
11
11
|
import { fg } from '@atlaskit/platform-feature-flags';
|
|
12
|
-
import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
|
|
13
12
|
export var SingleToolbarButtons = /*#__PURE__*/React.memo(function (_ref) {
|
|
14
13
|
var items = _ref.items,
|
|
15
14
|
isReducedSpacing = _ref.isReducedSpacing,
|
|
@@ -39,15 +38,11 @@ export var SingleToolbarButtons = /*#__PURE__*/React.memo(function (_ref) {
|
|
|
39
38
|
buttonId: item.buttonId,
|
|
40
39
|
spacing: isReducedSpacing ? 'none' : 'default',
|
|
41
40
|
onClick: onClick(item.command),
|
|
42
|
-
selected:
|
|
43
|
-
// eslint-disable-next-line @atlaskit/platform/no-preconditioning
|
|
44
|
-
hasMultiplePartsWithFormattingSelected && editorExperiment('platform_editor_controls', 'variant1') && !fg('platform_editor_controls_patch_10') ? false : item.isActive,
|
|
41
|
+
selected: item.isActive,
|
|
45
42
|
disabled: item.isDisabled,
|
|
46
43
|
title: item.tooltipElement,
|
|
47
44
|
iconBefore: item.iconElement,
|
|
48
|
-
"aria-pressed":
|
|
49
|
-
// eslint-disable-next-line @atlaskit/platform/no-preconditioning
|
|
50
|
-
hasMultiplePartsWithFormattingSelected && editorExperiment('platform_editor_controls', 'variant1') && !fg('platform_editor_controls_patch_10') ? false : item.isActive,
|
|
45
|
+
"aria-pressed": item.isActive,
|
|
51
46
|
"aria-label": (_item$ariaLabel = item['aria-label']) !== null && _item$ariaLabel !== void 0 ? _item$ariaLabel : String(item.content),
|
|
52
47
|
"aria-keyshortcuts": item['aria-keyshortcuts']
|
|
53
48
|
});
|
|
@@ -2,11 +2,10 @@ import type { IconTypes, MenuIconItem } from '../types';
|
|
|
2
2
|
interface UseIconsParams {
|
|
3
3
|
icons: Array<MenuIconItem | null>;
|
|
4
4
|
iconTypeList: IconTypes[];
|
|
5
|
-
shouldUnselect?: boolean;
|
|
6
5
|
}
|
|
7
6
|
export type IconsPositions = {
|
|
8
7
|
dropdownItems: Array<MenuIconItem>;
|
|
9
8
|
singleItems: Array<MenuIconItem>;
|
|
10
9
|
};
|
|
11
|
-
export declare const useIconList: ({ icons, iconTypeList
|
|
10
|
+
export declare const useIconList: ({ icons, iconTypeList }: UseIconsParams) => IconsPositions;
|
|
12
11
|
export {};
|
|
@@ -2,11 +2,10 @@ import type { IconTypes, MenuIconItem } from '../types';
|
|
|
2
2
|
interface UseIconsParams {
|
|
3
3
|
icons: Array<MenuIconItem | null>;
|
|
4
4
|
iconTypeList: IconTypes[];
|
|
5
|
-
shouldUnselect?: boolean;
|
|
6
5
|
}
|
|
7
6
|
export type IconsPositions = {
|
|
8
7
|
dropdownItems: Array<MenuIconItem>;
|
|
9
8
|
singleItems: Array<MenuIconItem>;
|
|
10
9
|
};
|
|
11
|
-
export declare const useIconList: ({ icons, iconTypeList
|
|
10
|
+
export declare const useIconList: ({ icons, iconTypeList }: UseIconsParams) => IconsPositions;
|
|
12
11
|
export {};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/editor-plugin-text-formatting",
|
|
3
|
-
"version": "2.
|
|
3
|
+
"version": "2.4.1",
|
|
4
4
|
"description": "Text-formatting plugin for @atlaskit/editor-core",
|
|
5
5
|
"author": "Atlassian Pty Ltd",
|
|
6
6
|
"license": "Apache-2.0",
|
|
@@ -34,7 +34,7 @@
|
|
|
34
34
|
},
|
|
35
35
|
"dependencies": {
|
|
36
36
|
"@atlaskit/adf-schema": "^47.6.0",
|
|
37
|
-
"@atlaskit/editor-common": "^107.
|
|
37
|
+
"@atlaskit/editor-common": "^107.1.0",
|
|
38
38
|
"@atlaskit/editor-plugin-analytics": "^2.3.0",
|
|
39
39
|
"@atlaskit/editor-plugin-base": "^3.0.0",
|
|
40
40
|
"@atlaskit/editor-plugin-primary-toolbar": "^3.2.0",
|
|
@@ -42,11 +42,11 @@
|
|
|
42
42
|
"@atlaskit/editor-prosemirror": "7.0.0",
|
|
43
43
|
"@atlaskit/editor-shared-styles": "^3.4.0",
|
|
44
44
|
"@atlaskit/editor-tables": "^2.9.0",
|
|
45
|
-
"@atlaskit/icon": "^27.
|
|
45
|
+
"@atlaskit/icon": "^27.1.0",
|
|
46
46
|
"@atlaskit/platform-feature-flags": "^1.1.0",
|
|
47
47
|
"@atlaskit/prosemirror-input-rules": "^3.3.0",
|
|
48
48
|
"@atlaskit/tmp-editor-statsig": "^8.0.0",
|
|
49
|
-
"@atlaskit/tokens": "^5.
|
|
49
|
+
"@atlaskit/tokens": "^5.4.0",
|
|
50
50
|
"@babel/runtime": "^7.0.0",
|
|
51
51
|
"@emotion/react": "^11.7.1",
|
|
52
52
|
"react-intl-next": "npm:react-intl@^5.18.1"
|
|
@@ -110,9 +110,6 @@
|
|
|
110
110
|
"platform_editor_controls_patch_9": {
|
|
111
111
|
"type": "boolean"
|
|
112
112
|
},
|
|
113
|
-
"platform_editor_controls_patch_10": {
|
|
114
|
-
"type": "boolean"
|
|
115
|
-
},
|
|
116
113
|
"platform_editor_controls_patch_13": {
|
|
117
114
|
"type": "boolean"
|
|
118
115
|
},
|
|
@@ -124,6 +121,9 @@
|
|
|
124
121
|
},
|
|
125
122
|
"platform_editor_use_preferences_plugin": {
|
|
126
123
|
"type": "boolean"
|
|
124
|
+
},
|
|
125
|
+
"platform_editor_common_marks": {
|
|
126
|
+
"type": "boolean"
|
|
127
127
|
}
|
|
128
128
|
}
|
|
129
129
|
}
|