@atlaskit/editor-plugin-show-diff 13.0.11 → 13.1.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 +32 -0
- package/afm-cc/tsconfig.json +3 -0
- package/afm-products/tsconfig.json +3 -0
- package/dist/cjs/pm-plugins/decorations/colorSchemes/factory.js +259 -23
- package/dist/cjs/pm-plugins/decorations/colorSchemes/schemes.js +21 -5
- package/dist/cjs/pm-plugins/decorations/createBlockChangedDecoration.js +87 -105
- package/dist/cjs/pm-plugins/decorations/createBlockChangedDecoration.styles.legacy.js +124 -0
- package/dist/cjs/pm-plugins/decorations/createChangedRowDecorationWidgets.js +15 -12
- package/dist/cjs/pm-plugins/decorations/createChangedRowDecorationWidgets.styles.legacy.js +37 -0
- package/dist/cjs/pm-plugins/decorations/createInlineChangedDecoration.js +109 -59
- package/dist/cjs/pm-plugins/decorations/createInlineChangedDecoration.styles.legacy.js +67 -0
- package/dist/cjs/pm-plugins/decorations/utils/wrapBlockNodeView.js +30 -168
- package/dist/cjs/pm-plugins/decorations/utils/wrapBlockNodeViewStyles.js +205 -0
- package/dist/cjs/pm-plugins/decorations/utils/wrapBlockNodeViewStyles.legacy.js +225 -0
- package/dist/es2019/pm-plugins/decorations/colorSchemes/factory.js +247 -23
- package/dist/es2019/pm-plugins/decorations/colorSchemes/schemes.js +20 -4
- package/dist/es2019/pm-plugins/decorations/createBlockChangedDecoration.js +85 -105
- package/dist/es2019/pm-plugins/decorations/createBlockChangedDecoration.styles.legacy.js +118 -0
- package/dist/es2019/pm-plugins/decorations/createChangedRowDecorationWidgets.js +15 -12
- package/dist/es2019/pm-plugins/decorations/createChangedRowDecorationWidgets.styles.legacy.js +33 -0
- package/dist/es2019/pm-plugins/decorations/createInlineChangedDecoration.js +82 -37
- package/dist/es2019/pm-plugins/decorations/createInlineChangedDecoration.styles.legacy.js +62 -0
- package/dist/es2019/pm-plugins/decorations/utils/wrapBlockNodeView.js +15 -140
- package/dist/es2019/pm-plugins/decorations/utils/wrapBlockNodeViewStyles.js +143 -0
- package/dist/es2019/pm-plugins/decorations/utils/wrapBlockNodeViewStyles.legacy.js +200 -0
- package/dist/esm/pm-plugins/decorations/colorSchemes/factory.js +248 -23
- package/dist/esm/pm-plugins/decorations/colorSchemes/schemes.js +20 -4
- package/dist/esm/pm-plugins/decorations/createBlockChangedDecoration.js +87 -105
- package/dist/esm/pm-plugins/decorations/createBlockChangedDecoration.styles.legacy.js +118 -0
- package/dist/esm/pm-plugins/decorations/createChangedRowDecorationWidgets.js +15 -12
- package/dist/esm/pm-plugins/decorations/createChangedRowDecorationWidgets.styles.legacy.js +32 -0
- package/dist/esm/pm-plugins/decorations/createInlineChangedDecoration.js +109 -59
- package/dist/esm/pm-plugins/decorations/createInlineChangedDecoration.styles.legacy.js +61 -0
- package/dist/esm/pm-plugins/decorations/utils/wrapBlockNodeView.js +15 -153
- package/dist/esm/pm-plugins/decorations/utils/wrapBlockNodeViewStyles.js +198 -0
- package/dist/esm/pm-plugins/decorations/utils/wrapBlockNodeViewStyles.legacy.js +218 -0
- package/dist/types/pm-plugins/decorations/colorSchemes/factory.d.ts +78 -6
- package/dist/types/pm-plugins/decorations/colorSchemes/schemes.d.ts +3 -0
- package/dist/types/pm-plugins/decorations/colorSchemes/types.d.ts +13 -3
- package/dist/types/pm-plugins/decorations/createBlockChangedDecoration.styles.legacy.d.ts +14 -0
- package/dist/types/pm-plugins/decorations/createChangedRowDecorationWidgets.styles.legacy.d.ts +22 -0
- package/dist/types/pm-plugins/decorations/createInlineChangedDecoration.styles.legacy.d.ts +26 -0
- package/dist/types/pm-plugins/decorations/utils/wrapBlockNodeViewStyles.d.ts +39 -0
- package/dist/types/pm-plugins/decorations/utils/wrapBlockNodeViewStyles.legacy.d.ts +40 -0
- package/package.json +4 -3
|
@@ -0,0 +1,118 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Pre-refactor code preserved for the OFF cohort of
|
|
3
|
+
* `platform_editor_show_diff_color_scheme_refactor`.
|
|
4
|
+
*
|
|
5
|
+
* This is a verbatim copy of the `getBlockNodeStyle` and the cell-overlay style selection that
|
|
6
|
+
* lived in `createBlockChangedDecoration.ts` before the `colorSchemeRegistry` + `factory.ts`
|
|
7
|
+
* migration. Do not modify it — it exists so the OFF cohort keeps the exact pre-refactor style
|
|
8
|
+
* strings. Delete this file at cleanup, together with `colorSchemes/standard.ts`,
|
|
9
|
+
* `colorSchemes/traditional.ts` (EDITOR-8281).
|
|
10
|
+
*/
|
|
11
|
+
import { convertToInlineCss } from '@atlaskit/editor-common/lazy-node-view';
|
|
12
|
+
import { isExtendedEnabled } from '../isExtendedEnabled';
|
|
13
|
+
import { standardDecorationMarkerVariable, deletedDecorationMarkerVariable, editingStyleQuoteNode, editingStyleRuleNode, editingStyleCardBlockNode, editingStyleNode, deletedContentStyleNew, deletedStyleQuoteNode, addedCellOverlayStyle, addedCellOverlayRoundedStyle, deletedCellOverlayStyle, deletedCellOverlayRoundedStyle } from './colorSchemes/standard';
|
|
14
|
+
import { traditionalDecorationMarkerVariableActive, traditionalDecorationMarkerVariableNew, traditionalDeletedDecorationMarkerVariableActive, traditionalDeletedDecorationMarkerVariableNew, traditionalStyleQuoteNodeActive, traditionalStyleQuoteNodeNew, traditionalStyleRuleNodeActive, traditionalStyleRuleNodeNew, traditionalStyleCardBlockNodeActive, traditionalStyleCardBlockNodeNew, traditionalStyleNodeActive, traditionalStyleNodeNew, getDeletedTraditionalInlineStyle, deletedTraditionalStyleQuoteNode, traditionalAddedCellOverlayStyle, traditionalAddedCellOverlayRoundedStyle, deletedTraditionalCellOverlayStyle, deletedTraditionalCellOverlayRoundedStyle } from './colorSchemes/traditional';
|
|
15
|
+
|
|
16
|
+
/** Verbatim copy of the pre-refactor cell-overlay style selection. */
|
|
17
|
+
export var resolveCellOverlayStyleLegacy = function resolveCellOverlayStyleLegacy(_ref) {
|
|
18
|
+
var colorScheme = _ref.colorScheme,
|
|
19
|
+
isRoundedTable = _ref.isRoundedTable,
|
|
20
|
+
useAddedStyle = _ref.useAddedStyle;
|
|
21
|
+
var isTraditional = colorScheme === 'traditional';
|
|
22
|
+
var addedCellStyle = isTraditional ? isRoundedTable ? traditionalAddedCellOverlayRoundedStyle : traditionalAddedCellOverlayStyle : isRoundedTable ? addedCellOverlayRoundedStyle : addedCellOverlayStyle;
|
|
23
|
+
var deletedCellStyle = isTraditional ? isRoundedTable ? deletedTraditionalCellOverlayRoundedStyle : deletedTraditionalCellOverlayStyle : isRoundedTable ? deletedCellOverlayRoundedStyle : deletedCellOverlayStyle;
|
|
24
|
+
return useAddedStyle ? addedCellStyle : deletedCellStyle;
|
|
25
|
+
};
|
|
26
|
+
export var getBlockNodeStyleLegacy = function getBlockNodeStyleLegacy(_ref2) {
|
|
27
|
+
var nodeName = _ref2.nodeName,
|
|
28
|
+
colorScheme = _ref2.colorScheme,
|
|
29
|
+
_ref2$isInserted = _ref2.isInserted,
|
|
30
|
+
isInserted = _ref2$isInserted === void 0 ? true : _ref2$isInserted,
|
|
31
|
+
_ref2$isActive = _ref2.isActive,
|
|
32
|
+
isActive = _ref2$isActive === void 0 ? false : _ref2$isActive,
|
|
33
|
+
diffType = _ref2.diffType;
|
|
34
|
+
var isTraditional = colorScheme === 'traditional';
|
|
35
|
+
if (['mediaSingle', 'mediaGroup', 'table',
|
|
36
|
+
// Handle table separately to avoid border issues
|
|
37
|
+
'tableRow', 'paragraph',
|
|
38
|
+
// Paragraph and heading nodes do not need special styling
|
|
39
|
+
'heading', 'hardBreak', 'decisionList', 'taskList', 'bulletList', 'orderedList', 'layoutSection'].includes(nodeName)) {
|
|
40
|
+
// Layout nodes do not need special styling
|
|
41
|
+
return undefined;
|
|
42
|
+
}
|
|
43
|
+
// Media nodes inside mediaSingle should not get position:relative
|
|
44
|
+
// as it shifts the image outside its parent container (e.g. panel)
|
|
45
|
+
if (nodeName === 'media') {
|
|
46
|
+
if (!isInserted && isExtendedEnabled(diffType)) {
|
|
47
|
+
return isTraditional ? getDeletedTraditionalInlineStyle(false) : deletedDecorationMarkerVariable;
|
|
48
|
+
}
|
|
49
|
+
return isTraditional ? isActive ? traditionalStyleNodeActive : traditionalStyleNodeNew : editingStyleNode;
|
|
50
|
+
}
|
|
51
|
+
if (['tableCell', 'tableHeader'].includes(nodeName)) {
|
|
52
|
+
if (isExtendedEnabled(diffType)) {
|
|
53
|
+
// This is used for positioning the cell overlay widget decorations
|
|
54
|
+
return convertToInlineCss({
|
|
55
|
+
position: 'relative'
|
|
56
|
+
});
|
|
57
|
+
}
|
|
58
|
+
// When gate is off, it should return undefined as above
|
|
59
|
+
return undefined;
|
|
60
|
+
}
|
|
61
|
+
if (nodeName === 'panel') {
|
|
62
|
+
if (!isInserted && isExtendedEnabled(diffType)) {
|
|
63
|
+
return isTraditional ? getDeletedTraditionalInlineStyle(false) : deletedDecorationMarkerVariable;
|
|
64
|
+
}
|
|
65
|
+
return isTraditional ? isActive ? traditionalStyleNodeActive : traditionalStyleNodeNew : editingStyleNode;
|
|
66
|
+
}
|
|
67
|
+
if (['extension', 'embedCard', 'listItem'].includes(nodeName)) {
|
|
68
|
+
if (isExtendedEnabled(diffType)) {
|
|
69
|
+
if (isInserted) {
|
|
70
|
+
return isTraditional && isActive ? traditionalDecorationMarkerVariableActive : isTraditional ? traditionalDecorationMarkerVariableNew : standardDecorationMarkerVariable;
|
|
71
|
+
} else {
|
|
72
|
+
if (nodeName === 'listItem') {
|
|
73
|
+
return isTraditional && isActive ? traditionalDeletedDecorationMarkerVariableActive : isTraditional ? traditionalDeletedDecorationMarkerVariableNew : deletedDecorationMarkerVariable;
|
|
74
|
+
}
|
|
75
|
+
return isTraditional && isActive ? traditionalDeletedDecorationMarkerVariableActive : isTraditional ? traditionalDeletedDecorationMarkerVariableNew : deletedContentStyleNew;
|
|
76
|
+
}
|
|
77
|
+
}
|
|
78
|
+
return isTraditional && isActive ? traditionalDecorationMarkerVariableActive : isTraditional ? traditionalDecorationMarkerVariableNew : standardDecorationMarkerVariable;
|
|
79
|
+
}
|
|
80
|
+
if (nodeName === 'blockquote') {
|
|
81
|
+
if (isExtendedEnabled(diffType)) {
|
|
82
|
+
if (isInserted) {
|
|
83
|
+
return isTraditional ? isActive ? traditionalStyleQuoteNodeActive : traditionalStyleQuoteNodeNew : editingStyleQuoteNode;
|
|
84
|
+
} else {
|
|
85
|
+
return isTraditional ? deletedTraditionalStyleQuoteNode : deletedStyleQuoteNode;
|
|
86
|
+
}
|
|
87
|
+
}
|
|
88
|
+
return isTraditional ? isActive ? traditionalStyleQuoteNodeActive : traditionalStyleQuoteNodeNew : editingStyleQuoteNode;
|
|
89
|
+
}
|
|
90
|
+
if (nodeName === 'rule') {
|
|
91
|
+
if (isExtendedEnabled(diffType)) {
|
|
92
|
+
if (isInserted) {
|
|
93
|
+
return isTraditional ? isActive ? traditionalStyleRuleNodeActive : traditionalStyleRuleNodeNew : editingStyleRuleNode;
|
|
94
|
+
} else {
|
|
95
|
+
return isTraditional ? getDeletedTraditionalInlineStyle(false) : deletedContentStyleNew;
|
|
96
|
+
}
|
|
97
|
+
}
|
|
98
|
+
return isTraditional ? isActive ? traditionalStyleRuleNodeActive : traditionalStyleRuleNodeNew : editingStyleRuleNode;
|
|
99
|
+
}
|
|
100
|
+
if (nodeName === 'blockCard') {
|
|
101
|
+
if (isExtendedEnabled(diffType)) {
|
|
102
|
+
if (isInserted) {
|
|
103
|
+
return isTraditional ? isActive ? traditionalStyleCardBlockNodeActive : traditionalStyleCardBlockNodeNew : editingStyleCardBlockNode;
|
|
104
|
+
} else {
|
|
105
|
+
return isTraditional ? getDeletedTraditionalInlineStyle(false) : deletedContentStyleNew;
|
|
106
|
+
}
|
|
107
|
+
}
|
|
108
|
+
return isTraditional ? isActive ? traditionalStyleCardBlockNodeActive : traditionalStyleCardBlockNodeNew : editingStyleCardBlockNode;
|
|
109
|
+
}
|
|
110
|
+
if (isExtendedEnabled(diffType)) {
|
|
111
|
+
if (isInserted) {
|
|
112
|
+
return isTraditional ? isActive ? traditionalStyleNodeActive : traditionalStyleNodeNew : editingStyleNode;
|
|
113
|
+
} else {
|
|
114
|
+
return isTraditional ? getDeletedTraditionalInlineStyle(false) : deletedContentStyleNew;
|
|
115
|
+
}
|
|
116
|
+
}
|
|
117
|
+
return isTraditional ? isActive ? traditionalStyleNodeActive : traditionalStyleNodeNew : editingStyleNode;
|
|
118
|
+
};
|
|
@@ -9,13 +9,16 @@ import { areNodesEqualIgnoreAttrs } from '@atlaskit/editor-common/utils/document
|
|
|
9
9
|
import { findParentNodeClosestToPos } from '@atlaskit/editor-prosemirror/utils';
|
|
10
10
|
import { Decoration } from '@atlaskit/editor-prosemirror/view';
|
|
11
11
|
import { TableMap } from '@atlaskit/editor-tables/table-map';
|
|
12
|
+
import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
|
|
12
13
|
import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
|
|
13
14
|
import { isExtendedEnabled } from '../isExtendedEnabled';
|
|
14
|
-
import {
|
|
15
|
-
import {
|
|
15
|
+
import { buildAddedCellOverlayRoundedStyle, buildAddedCellOverlayStyle, buildDeletedCellOverlayRoundedStyle, buildDeletedCellOverlayStyle, buildDeletedRowStyle } from './colorSchemes/factory';
|
|
16
|
+
import { colorSchemeRegistry } from './colorSchemes/schemes';
|
|
17
|
+
import { resolveCellOverlayStyleLegacy, resolveDeletedRowStyleLegacy } from './createChangedRowDecorationWidgets.styles.legacy';
|
|
16
18
|
import { buildDiffDecorationSpec } from './decorationKeys';
|
|
17
19
|
import { findSafeInsertPos } from './utils/findSafeInsertPos';
|
|
18
20
|
import { applyCellEdgeAttrs, getRowCellEdgeAttrs } from './utils/tableCellEdgeAttrs';
|
|
21
|
+
var DEFAULT_COLOR_SCHEME = 'standard';
|
|
19
22
|
/**
|
|
20
23
|
* Extracts information about deleted table rows from a change
|
|
21
24
|
*/
|
|
@@ -126,12 +129,11 @@ var isEmptyRow = function isEmptyRow(rowNode) {
|
|
|
126
129
|
*/
|
|
127
130
|
var createChangedRowDOM = function createChangedRowDOM(rowNode, cellEdgeAttrs, nodeViewSerializer, colorScheme, isInserted, diffType) {
|
|
128
131
|
var tr = document.createElement('tr');
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
tr.setAttribute('style', colorScheme === 'traditional' ? deletedTraditionalRowStyle : deletedRowStyle);
|
|
132
|
+
var colors = colorSchemeRegistry[colorScheme !== null && colorScheme !== void 0 ? colorScheme : DEFAULT_COLOR_SCHEME];
|
|
133
|
+
|
|
134
|
+
// Inserted rows keep their natural styling; the row strikethrough is deletions only.
|
|
135
|
+
if (!isExtendedEnabled(diffType) || !isInserted) {
|
|
136
|
+
tr.setAttribute('style', isExperimentEnabled('platform_editor_show_diff_color_scheme_refactor') ? buildDeletedRowStyle(colors) : resolveDeletedRowStyleLegacy(colorScheme));
|
|
135
137
|
}
|
|
136
138
|
tr.setAttribute('data-testid', 'show-diff-deleted-row');
|
|
137
139
|
|
|
@@ -146,10 +148,11 @@ var createChangedRowDOM = function createChangedRowDOM(rowNode, cellEdgeAttrs, n
|
|
|
146
148
|
if (isExtendedEnabled(diffType)) {
|
|
147
149
|
var overlay = document.createElement('span');
|
|
148
150
|
var isRoundedTable = expValEquals('platform_editor_table_diff_rounded_corners', 'isEnabled', true);
|
|
149
|
-
var
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
151
|
+
var overlayStyle = isExperimentEnabled('platform_editor_show_diff_color_scheme_refactor') ? isInserted ? isRoundedTable ? buildAddedCellOverlayRoundedStyle(colors) : buildAddedCellOverlayStyle(colors) : isRoundedTable ? buildDeletedCellOverlayRoundedStyle(colors) : buildDeletedCellOverlayStyle(colors) : resolveCellOverlayStyleLegacy({
|
|
152
|
+
colorScheme: colorScheme,
|
|
153
|
+
isInserted: isInserted,
|
|
154
|
+
isRoundedTable: isRoundedTable
|
|
155
|
+
});
|
|
153
156
|
overlay.setAttribute('style', overlayStyle);
|
|
154
157
|
nodeView.appendChild(overlay);
|
|
155
158
|
}
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Pre-refactor code preserved for the OFF cohort of
|
|
3
|
+
* `platform_editor_show_diff_color_scheme_refactor`.
|
|
4
|
+
*
|
|
5
|
+
* These resolvers reproduce the per-scheme string-constant style decisions that
|
|
6
|
+
* `createChangedRowDOM` made before the `colorSchemeRegistry` + `factory.ts` migration, verbatim.
|
|
7
|
+
*
|
|
8
|
+
* Do not modify. Delete this file at experiment cleanup (EDITOR-8281).
|
|
9
|
+
*/
|
|
10
|
+
|
|
11
|
+
import { addedCellOverlayRoundedStyle, addedCellOverlayStyle, deletedCellOverlayRoundedStyle, deletedCellOverlayStyle, deletedRowStyle } from './colorSchemes/standard';
|
|
12
|
+
import { deletedTraditionalCellOverlayRoundedStyle, deletedTraditionalCellOverlayStyle, deletedTraditionalRowStyle, traditionalAddedCellOverlayRoundedStyle, traditionalAddedCellOverlayStyle } from './colorSchemes/traditional';
|
|
13
|
+
|
|
14
|
+
/**
|
|
15
|
+
* Pre-refactor deleted-row style for the `<tr>` element.
|
|
16
|
+
*/
|
|
17
|
+
export var resolveDeletedRowStyleLegacy = function resolveDeletedRowStyleLegacy(colorScheme) {
|
|
18
|
+
return colorScheme === 'traditional' ? deletedTraditionalRowStyle : deletedRowStyle;
|
|
19
|
+
};
|
|
20
|
+
|
|
21
|
+
/**
|
|
22
|
+
* Pre-refactor cell overlay style.
|
|
23
|
+
*/
|
|
24
|
+
export var resolveCellOverlayStyleLegacy = function resolveCellOverlayStyleLegacy(_ref) {
|
|
25
|
+
var colorScheme = _ref.colorScheme,
|
|
26
|
+
isInserted = _ref.isInserted,
|
|
27
|
+
isRoundedTable = _ref.isRoundedTable;
|
|
28
|
+
var isTraditional = colorScheme === 'traditional';
|
|
29
|
+
var deletedCellStyle = isTraditional ? isRoundedTable ? deletedTraditionalCellOverlayRoundedStyle : deletedTraditionalCellOverlayStyle : isRoundedTable ? deletedCellOverlayRoundedStyle : deletedCellOverlayStyle;
|
|
30
|
+
var addedCellStyle = isTraditional ? isRoundedTable ? traditionalAddedCellOverlayRoundedStyle : traditionalAddedCellOverlayStyle : isRoundedTable ? addedCellOverlayRoundedStyle : addedCellOverlayStyle;
|
|
31
|
+
return isInserted ? addedCellStyle : deletedCellStyle;
|
|
32
|
+
};
|
|
@@ -4,24 +4,91 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
|
|
|
4
4
|
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
5
5
|
import { convertToInlineCss } from '@atlaskit/editor-common/lazy-node-view';
|
|
6
6
|
import { Decoration } from '@atlaskit/editor-prosemirror/view';
|
|
7
|
+
import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
|
|
7
8
|
import { isExtendedEnabled } from '../isExtendedEnabled';
|
|
8
|
-
import {
|
|
9
|
-
import {
|
|
9
|
+
import { buildAtomicInlineChangedCSSVariables, buildDeletedInlineContentStyleExtended, buildDeletedInlineStyle, buildDeletedInlineStyleStandard, buildInsertStyle, buildInsertStyleActive, buildInsertStyleExtended, buildInsertStyleExtendedActive, buildInsertStyleExtendedNoUnderline, buildInsertStyleExtendedNoUnderlineActive } from './colorSchemes/factory';
|
|
10
|
+
import { colorSchemeRegistry } from './colorSchemes/schemes';
|
|
10
11
|
import { createInlineIndicatorAnchorWidgets } from './createAnchorDecorationWidgets';
|
|
12
|
+
import { getAtomicInlineNodeClassNameLegacy, resolveInlineChangedStyleLegacy } from './createInlineChangedDecoration.styles.legacy';
|
|
11
13
|
import { buildDiffDecorationSpec } from './decorationKeys';
|
|
12
14
|
var displayNoneStyle = convertToInlineCss({
|
|
13
15
|
display: 'none'
|
|
14
16
|
});
|
|
15
|
-
var
|
|
17
|
+
var DEFAULT_COLOR_SCHEME = 'standard';
|
|
18
|
+
var getColorScheme = function getColorScheme(colorScheme) {
|
|
19
|
+
return colorSchemeRegistry[colorScheme !== null && colorScheme !== void 0 ? colorScheme : DEFAULT_COLOR_SCHEME];
|
|
20
|
+
};
|
|
21
|
+
|
|
22
|
+
/**
|
|
23
|
+
* Class names for an atomic inline node decoration (date, emoji, mention, status). Scheme-agnostic
|
|
24
|
+
* — `buildAtomicInlineChangedCSSVariables()` supplies the colour inline on the same element.
|
|
25
|
+
*/
|
|
26
|
+
var getAtomicInlineNodeClassName = function getAtomicInlineNodeClassName(inlineNodeName) {
|
|
16
27
|
var classNames = ['show-diff-atomic-inline-changed'];
|
|
17
28
|
if (inlineNodeName) {
|
|
18
29
|
classNames.push("show-diff-atomic-inline-changed-".concat(inlineNodeName));
|
|
19
30
|
}
|
|
20
|
-
if (colorScheme === 'traditional') {
|
|
21
|
-
classNames.push('show-diff-atomic-inline-changed-traditional');
|
|
22
|
-
}
|
|
23
31
|
return classNames.join(' ');
|
|
24
32
|
};
|
|
33
|
+
|
|
34
|
+
/** Inline style for inserted content under the extended diff experience. */
|
|
35
|
+
var getExtendedInsertStyle = function getExtendedInsertStyle(colors, isActive, hideAddedDiffsUnderline) {
|
|
36
|
+
if (colors.insertedInlineTreatment === 'underline') {
|
|
37
|
+
// hideAddedDiffsUnderline only targets the 'borderBottom' rule, so it does not apply here.
|
|
38
|
+
return isActive ? buildInsertStyleActive(colors) : buildInsertStyle(colors);
|
|
39
|
+
}
|
|
40
|
+
if (isActive) {
|
|
41
|
+
return hideAddedDiffsUnderline ? buildInsertStyleExtendedNoUnderlineActive(colors) : buildInsertStyleExtendedActive(colors);
|
|
42
|
+
}
|
|
43
|
+
return hideAddedDiffsUnderline ? buildInsertStyleExtendedNoUnderline(colors) : buildInsertStyleExtended(colors);
|
|
44
|
+
};
|
|
45
|
+
|
|
46
|
+
/** Inline style for deleted content under the extended diff experience. */
|
|
47
|
+
var getExtendedDeletedStyle = function getExtendedDeletedStyle(colors, isActive) {
|
|
48
|
+
if (colors.deletedInlineTreatment === 'strikethrough') {
|
|
49
|
+
// Identical in both states — the block decoration carries the active emphasis.
|
|
50
|
+
return buildDeletedInlineStyle(colors, false);
|
|
51
|
+
}
|
|
52
|
+
return buildDeletedInlineStyleStandard(colors, isActive ? 'active' : 'default') + buildDeletedInlineContentStyleExtended(colors);
|
|
53
|
+
};
|
|
54
|
+
|
|
55
|
+
/** Registry-driven inline `style` for a changed-content decoration. */
|
|
56
|
+
var resolveInlineChangedStyleRefactored = function resolveInlineChangedStyleRefactored(_ref) {
|
|
57
|
+
var colors = _ref.colors,
|
|
58
|
+
diffType = _ref.diffType,
|
|
59
|
+
hideAddedDiffsUnderline = _ref.hideAddedDiffsUnderline,
|
|
60
|
+
isActive = _ref.isActive,
|
|
61
|
+
isInserted = _ref.isInserted;
|
|
62
|
+
if (isExtendedEnabled(diffType)) {
|
|
63
|
+
return isInserted ? getExtendedInsertStyle(colors, isActive, hideAddedDiffsUnderline) : getExtendedDeletedStyle(colors, isActive);
|
|
64
|
+
}
|
|
65
|
+
return isActive ? buildInsertStyleActive(colors) : buildInsertStyle(colors);
|
|
66
|
+
};
|
|
67
|
+
|
|
68
|
+
/**
|
|
69
|
+
* Single gate for the inline `style` string: registry + factory when the refactor is on, the
|
|
70
|
+
* verbatim pre-refactor per-scheme constants when it is off.
|
|
71
|
+
*/
|
|
72
|
+
var resolveInlineChangedStyle = function resolveInlineChangedStyle(args) {
|
|
73
|
+
return isExperimentEnabled('platform_editor_show_diff_color_scheme_refactor') ? resolveInlineChangedStyleRefactored(args) : resolveInlineChangedStyleLegacy(args);
|
|
74
|
+
};
|
|
75
|
+
|
|
76
|
+
/**
|
|
77
|
+
* Single gate for the atomic-inline-node decoration attributes. The two cohorts differ in the DOM:
|
|
78
|
+
* on, the colour rides on an inline CSS variable and the class list is scheme-agnostic; off, the
|
|
79
|
+
* colour comes from a `-traditional` class and no variable is emitted. Returned together so the
|
|
80
|
+
* class list and style suffix can never be mixed across cohorts.
|
|
81
|
+
*/
|
|
82
|
+
var resolveAtomicInlineAttrs = function resolveAtomicInlineAttrs(inlineNodeName, colorScheme, colors) {
|
|
83
|
+
return isExperimentEnabled('platform_editor_show_diff_color_scheme_refactor') ? {
|
|
84
|
+
className: getAtomicInlineNodeClassName(inlineNodeName),
|
|
85
|
+
styleSuffix: buildAtomicInlineChangedCSSVariables(colors)
|
|
86
|
+
} : {
|
|
87
|
+
className: getAtomicInlineNodeClassNameLegacy(inlineNodeName, colorScheme),
|
|
88
|
+
styleSuffix: ''
|
|
89
|
+
};
|
|
90
|
+
};
|
|
91
|
+
|
|
25
92
|
/**
|
|
26
93
|
* Inline decoration used for insertions as the content already exists in the document
|
|
27
94
|
*
|
|
@@ -29,28 +96,28 @@ var getAtomicInlineNodeClassName = function getAtomicInlineNodeClassName(inlineN
|
|
|
29
96
|
* @returns Prosemirror inline decoration
|
|
30
97
|
*/
|
|
31
98
|
|
|
32
|
-
export var createInlineChangedDecoration = function createInlineChangedDecoration(
|
|
33
|
-
var change =
|
|
34
|
-
colorScheme =
|
|
35
|
-
|
|
36
|
-
isActive =
|
|
37
|
-
|
|
38
|
-
isInserted =
|
|
39
|
-
|
|
40
|
-
isAtomicInlineNode =
|
|
41
|
-
|
|
42
|
-
shouldHideDeleted =
|
|
43
|
-
|
|
44
|
-
showIndicators =
|
|
45
|
-
doc =
|
|
46
|
-
diffType =
|
|
47
|
-
|
|
48
|
-
hideAddedDiffsUnderline =
|
|
49
|
-
inlineNodeName =
|
|
50
|
-
|
|
51
|
-
hasDeletedWidget =
|
|
52
|
-
|
|
53
|
-
isDeletedWidgetBelow =
|
|
99
|
+
export var createInlineChangedDecoration = function createInlineChangedDecoration(_ref2) {
|
|
100
|
+
var change = _ref2.change,
|
|
101
|
+
colorScheme = _ref2.colorScheme,
|
|
102
|
+
_ref2$isActive = _ref2.isActive,
|
|
103
|
+
isActive = _ref2$isActive === void 0 ? false : _ref2$isActive,
|
|
104
|
+
_ref2$isInserted = _ref2.isInserted,
|
|
105
|
+
isInserted = _ref2$isInserted === void 0 ? true : _ref2$isInserted,
|
|
106
|
+
_ref2$isAtomicInlineN = _ref2.isAtomicInlineNode,
|
|
107
|
+
isAtomicInlineNode = _ref2$isAtomicInlineN === void 0 ? false : _ref2$isAtomicInlineN,
|
|
108
|
+
_ref2$shouldHideDelet = _ref2.shouldHideDeleted,
|
|
109
|
+
shouldHideDeleted = _ref2$shouldHideDelet === void 0 ? false : _ref2$shouldHideDelet,
|
|
110
|
+
_ref2$showIndicators = _ref2.showIndicators,
|
|
111
|
+
showIndicators = _ref2$showIndicators === void 0 ? false : _ref2$showIndicators,
|
|
112
|
+
doc = _ref2.doc,
|
|
113
|
+
diffType = _ref2.diffType,
|
|
114
|
+
_ref2$hideAddedDiffsU = _ref2.hideAddedDiffsUnderline,
|
|
115
|
+
hideAddedDiffsUnderline = _ref2$hideAddedDiffsU === void 0 ? false : _ref2$hideAddedDiffsU,
|
|
116
|
+
inlineNodeName = _ref2.inlineNodeName,
|
|
117
|
+
_ref2$hasDeletedWidge = _ref2.hasDeletedWidget,
|
|
118
|
+
hasDeletedWidget = _ref2$hasDeletedWidge === void 0 ? false : _ref2$hasDeletedWidge,
|
|
119
|
+
_ref2$isDeletedWidget = _ref2.isDeletedWidgetBelow,
|
|
120
|
+
isDeletedWidgetBelow = _ref2$isDeletedWidget === void 0 ? false : _ref2$isDeletedWidget;
|
|
54
121
|
var diffId = crypto.randomUUID();
|
|
55
122
|
if (shouldHideDeleted) {
|
|
56
123
|
return [Decoration.inline(change.fromB, change.toB, {
|
|
@@ -61,38 +128,21 @@ export var createInlineChangedDecoration = function createInlineChangedDecoratio
|
|
|
61
128
|
isActive: isActive
|
|
62
129
|
}))];
|
|
63
130
|
}
|
|
64
|
-
var
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
} else {
|
|
76
|
-
style = isActive ? deletedContentStyleActive : deletedContentStyle;
|
|
77
|
-
/**
|
|
78
|
-
* Merge into existing styles when cleaning up
|
|
79
|
-
*/
|
|
80
|
-
if (isExtendedEnabled(diffType)) {
|
|
81
|
-
style += deletedInlineContentStyleExtended;
|
|
82
|
-
}
|
|
83
|
-
}
|
|
84
|
-
}
|
|
85
|
-
} else {
|
|
86
|
-
if (colorScheme === 'traditional') {
|
|
87
|
-
style = isActive ? traditionalInsertStyleActive : traditionalInsertStyle;
|
|
88
|
-
} else {
|
|
89
|
-
style = isActive ? editingStyleActive : editingStyle;
|
|
90
|
-
}
|
|
91
|
-
}
|
|
131
|
+
var colors = getColorScheme(colorScheme);
|
|
132
|
+
var style = resolveInlineChangedStyle({
|
|
133
|
+
colors: colors,
|
|
134
|
+
colorScheme: colorScheme,
|
|
135
|
+
diffType: diffType,
|
|
136
|
+
hideAddedDiffsUnderline: hideAddedDiffsUnderline,
|
|
137
|
+
isActive: isActive,
|
|
138
|
+
isInserted: isInserted
|
|
139
|
+
});
|
|
140
|
+
var isAtomicInlineInsertion = isAtomicInlineNode && isInserted;
|
|
141
|
+
var atomicInlineAttrs = isAtomicInlineInsertion ? resolveAtomicInlineAttrs(inlineNodeName, colorScheme, colors) : undefined;
|
|
92
142
|
var decorations = [Decoration.inline(change.fromB, change.toB, _objectSpread(_objectSpread({
|
|
93
|
-
style: style
|
|
94
|
-
},
|
|
95
|
-
class:
|
|
143
|
+
style: atomicInlineAttrs ? "".concat(style).concat(atomicInlineAttrs.styleSuffix) : style
|
|
144
|
+
}, atomicInlineAttrs && {
|
|
145
|
+
class: atomicInlineAttrs.className
|
|
96
146
|
}), {}, {
|
|
97
147
|
'data-testid': 'show-diff-changed-decoration'
|
|
98
148
|
}), buildDiffDecorationSpec({
|
|
@@ -0,0 +1,61 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Pre-refactor `createInlineChangedDecoration` styling code, preserved verbatim for the OFF cohort
|
|
3
|
+
* of `platform_editor_show_diff_color_scheme_refactor`.
|
|
4
|
+
*
|
|
5
|
+
* Do not modify — this module exists purely so the OFF cohort keeps running the exact code that
|
|
6
|
+
* shipped before the `colorSchemeRegistry` + `factory.ts` migration. Delete the whole file at
|
|
7
|
+
* experiment cleanup (EDITOR-8281).
|
|
8
|
+
*/
|
|
9
|
+
|
|
10
|
+
import { isExtendedEnabled } from '../isExtendedEnabled';
|
|
11
|
+
import { deletedContentStyle, deletedContentStyleActive, deletedInlineContentStyleExtended, editingStyle, editingStyleActive, editingStyleActiveExtended, editingStyleActiveExtendedNoUnderline, editingStyleExtended, editingStyleExtendedNoUnderline } from './colorSchemes/standard';
|
|
12
|
+
import { getDeletedTraditionalInlineStyle, traditionalInsertStyle, traditionalInsertStyleActive } from './colorSchemes/traditional';
|
|
13
|
+
/**
|
|
14
|
+
* Pre-refactor inline `style` computation for `createInlineChangedDecoration`.
|
|
15
|
+
*/
|
|
16
|
+
export var resolveInlineChangedStyleLegacy = function resolveInlineChangedStyleLegacy(_ref) {
|
|
17
|
+
var colorScheme = _ref.colorScheme,
|
|
18
|
+
diffType = _ref.diffType,
|
|
19
|
+
hideAddedDiffsUnderline = _ref.hideAddedDiffsUnderline,
|
|
20
|
+
isActive = _ref.isActive,
|
|
21
|
+
isInserted = _ref.isInserted;
|
|
22
|
+
var style;
|
|
23
|
+
if (isExtendedEnabled(diffType)) {
|
|
24
|
+
if (isInserted) {
|
|
25
|
+
if (colorScheme === 'traditional') {
|
|
26
|
+
style = isActive ? traditionalInsertStyleActive : traditionalInsertStyle;
|
|
27
|
+
} else {
|
|
28
|
+
style = isActive ? hideAddedDiffsUnderline ? editingStyleActiveExtendedNoUnderline : editingStyleActiveExtended : hideAddedDiffsUnderline ? editingStyleExtendedNoUnderline : editingStyleExtended;
|
|
29
|
+
}
|
|
30
|
+
} else {
|
|
31
|
+
if (colorScheme === 'traditional') {
|
|
32
|
+
style = getDeletedTraditionalInlineStyle(false);
|
|
33
|
+
} else {
|
|
34
|
+
style = (isActive ? deletedContentStyleActive : deletedContentStyle) + deletedInlineContentStyleExtended;
|
|
35
|
+
}
|
|
36
|
+
}
|
|
37
|
+
} else {
|
|
38
|
+
if (colorScheme === 'traditional') {
|
|
39
|
+
style = isActive ? traditionalInsertStyleActive : traditionalInsertStyle;
|
|
40
|
+
} else {
|
|
41
|
+
style = isActive ? editingStyleActive : editingStyle;
|
|
42
|
+
}
|
|
43
|
+
}
|
|
44
|
+
return style;
|
|
45
|
+
};
|
|
46
|
+
|
|
47
|
+
/**
|
|
48
|
+
* Pre-refactor class names for an atomic inline node decoration (date, emoji, mention, status).
|
|
49
|
+
* The colour was carried by the per-scheme `-traditional` class rather than by an inline CSS
|
|
50
|
+
* variable on the same element.
|
|
51
|
+
*/
|
|
52
|
+
export var getAtomicInlineNodeClassNameLegacy = function getAtomicInlineNodeClassNameLegacy(inlineNodeName, colorScheme) {
|
|
53
|
+
var classNames = ['show-diff-atomic-inline-changed'];
|
|
54
|
+
if (inlineNodeName) {
|
|
55
|
+
classNames.push("show-diff-atomic-inline-changed-".concat(inlineNodeName));
|
|
56
|
+
}
|
|
57
|
+
if (colorScheme === 'traditional') {
|
|
58
|
+
classNames.push('show-diff-atomic-inline-changed-traditional');
|
|
59
|
+
}
|
|
60
|
+
return classNames.join(' ');
|
|
61
|
+
};
|