@atlaskit/editor-plugin-placeholder 12.0.34 → 12.0.35
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 +8 -0
- package/dist/cjs/pm-plugins/main.js +5 -23
- package/dist/cjs/pm-plugins/utils.js +1 -1
- package/dist/es2019/pm-plugins/main.js +35 -51
- package/dist/es2019/pm-plugins/utils.js +1 -1
- package/dist/esm/pm-plugins/main.js +5 -22
- package/dist/esm/pm-plugins/utils.js +1 -1
- package/dist/types/pm-plugins/types.d.ts +0 -2
- package/package.json +6 -6
- package/dist/cjs/pm-plugins/source-sync-block-placeholder-decorations.js +0 -132
- package/dist/es2019/pm-plugins/source-sync-block-placeholder-decorations.js +0 -121
- package/dist/esm/pm-plugins/source-sync-block-placeholder-decorations.js +0 -125
- package/dist/types/pm-plugins/source-sync-block-placeholder-decorations.d.ts +0 -17
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,13 @@
|
|
|
1
1
|
# @atlaskit/editor-plugin-placeholder
|
|
2
2
|
|
|
3
|
+
## 12.0.35
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [`67ae1e14e8090`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/67ae1e14e8090) -
|
|
8
|
+
Revert persistent placeholder decorations for empty source synced blocks while retaining the sync
|
|
9
|
+
block activation experiment setup.
|
|
10
|
+
|
|
3
11
|
## 12.0.34
|
|
4
12
|
|
|
5
13
|
### Patch Changes
|
|
@@ -1,20 +1,15 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
-
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
3
|
Object.defineProperty(exports, "__esModule", {
|
|
5
4
|
value: true
|
|
6
5
|
});
|
|
7
6
|
exports.default = createPlugin;
|
|
8
|
-
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
9
7
|
var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
|
|
10
8
|
var _expVal = require("@atlaskit/tmp-editor-statsig/expVal");
|
|
11
9
|
var _placeholderPlugin = require("../placeholderPlugin");
|
|
12
10
|
var _constants = require("./constants");
|
|
13
11
|
var _decorations = require("./decorations");
|
|
14
|
-
var _sourceSyncBlockPlaceholderDecorations = require("./source-sync-block-placeholder-decorations");
|
|
15
12
|
var _utils = require("./utils");
|
|
16
|
-
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
17
|
-
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
18
13
|
function createPlugin(intl, defaultPlaceholderText, bracketPlaceholderText, emptyLinePlaceholder, placeholderPrompts, withEmptyParagraph, initialIsPlaceholderHidden, placeholderADF, isRovoLLMEnabled, api) {
|
|
19
14
|
if (!defaultPlaceholderText && !placeholderPrompts && !bracketPlaceholderText && !placeholderADF) {
|
|
20
15
|
return;
|
|
@@ -32,7 +27,7 @@ function createPlugin(intl, defaultPlaceholderText, bracketPlaceholderText, empt
|
|
|
32
27
|
state: {
|
|
33
28
|
init: function init(_, state) {
|
|
34
29
|
var _api$focus, _api$typeAhead;
|
|
35
|
-
return
|
|
30
|
+
return (0, _utils.createPlaceHolderStateFrom)({
|
|
36
31
|
isInitial: true,
|
|
37
32
|
isEditorFocused: Boolean(api === null || api === void 0 || (_api$focus = api.focus) === null || _api$focus === void 0 || (_api$focus = _api$focus.sharedState.currentState()) === null || _api$focus === void 0 ? void 0 : _api$focus.hasFocus),
|
|
38
33
|
editorState: state,
|
|
@@ -47,8 +42,6 @@ function createPlugin(intl, defaultPlaceholderText, bracketPlaceholderText, empt
|
|
|
47
42
|
intl: intl,
|
|
48
43
|
withEmptyParagraph: withEmptyParagraph,
|
|
49
44
|
isPlaceholderHidden: initialIsPlaceholderHidden
|
|
50
|
-
})), {}, {
|
|
51
|
-
sourceSyncBlockPlaceholderDecorations: (0, _sourceSyncBlockPlaceholderDecorations.createSourceSyncBlockPlaceholderDecorations)(state, intl)
|
|
52
45
|
});
|
|
53
46
|
},
|
|
54
47
|
apply: function apply(tr, placeholderState, _oldEditorState, newEditorState) {
|
|
@@ -75,7 +68,7 @@ function createPlugin(intl, defaultPlaceholderText, bracketPlaceholderText, empt
|
|
|
75
68
|
defaultPlaceholderText = meta.placeholderText;
|
|
76
69
|
}
|
|
77
70
|
}
|
|
78
|
-
var newPlaceholderState =
|
|
71
|
+
var newPlaceholderState = (0, _utils.createPlaceHolderStateFrom)({
|
|
79
72
|
isEditorFocused: isEditorFocused,
|
|
80
73
|
editorState: newEditorState,
|
|
81
74
|
isTypeAheadOpen: api === null || api === void 0 || (_api$typeAhead2 = api.typeAhead) === null || _api$typeAhead2 === void 0 ? void 0 : _api$typeAhead2.actions.isOpen,
|
|
@@ -90,14 +83,6 @@ function createPlugin(intl, defaultPlaceholderText, bracketPlaceholderText, empt
|
|
|
90
83
|
isPlaceholderHidden: isPlaceholderHidden,
|
|
91
84
|
withEmptyParagraph: withEmptyParagraph,
|
|
92
85
|
showOnEmptyParagraph: (_meta$showOnEmptyPara = meta === null || meta === void 0 ? void 0 : meta.showOnEmptyParagraph) !== null && _meta$showOnEmptyPara !== void 0 ? _meta$showOnEmptyPara : placeholderState === null || placeholderState === void 0 ? void 0 : placeholderState.showOnEmptyParagraph
|
|
93
|
-
})), {}, {
|
|
94
|
-
sourceSyncBlockPlaceholderDecorations: (0, _sourceSyncBlockPlaceholderDecorations.updateSourceSyncBlockPlaceholderDecorations)({
|
|
95
|
-
currentDecorationSet: placeholderState === null || placeholderState === void 0 ? void 0 : placeholderState.sourceSyncBlockPlaceholderDecorations,
|
|
96
|
-
intl: intl,
|
|
97
|
-
newEditorState: newEditorState,
|
|
98
|
-
oldEditorState: _oldEditorState,
|
|
99
|
-
tr: tr
|
|
100
|
-
})
|
|
101
86
|
});
|
|
102
87
|
|
|
103
88
|
// Clear timeouts when hasPlaceholder becomes false
|
|
@@ -120,8 +105,7 @@ function createPlugin(intl, defaultPlaceholderText, bracketPlaceholderText, empt
|
|
|
120
105
|
pos = _getPlaceholderState.pos,
|
|
121
106
|
typedAndDeleted = _getPlaceholderState.typedAndDeleted,
|
|
122
107
|
contextPlaceholderADF = _getPlaceholderState.contextPlaceholderADF,
|
|
123
|
-
showOnEmptyParagraph = _getPlaceholderState.showOnEmptyParagraph
|
|
124
|
-
sourceSyncBlockPlaceholderDecorations = _getPlaceholderState.sourceSyncBlockPlaceholderDecorations;
|
|
108
|
+
showOnEmptyParagraph = _getPlaceholderState.showOnEmptyParagraph;
|
|
125
109
|
|
|
126
110
|
// Decorations is still called after plugin is destroyed
|
|
127
111
|
// So we need to make sure decorations is not called if plugin has been destroyed to prevent the placeholder animations' setTimeouts called infinitely
|
|
@@ -130,15 +114,13 @@ function createPlugin(intl, defaultPlaceholderText, bracketPlaceholderText, empt
|
|
|
130
114
|
}
|
|
131
115
|
var compositionPluginState = api === null || api === void 0 || (_api$composition = api.composition) === null || _api$composition === void 0 ? void 0 : _api$composition.sharedState.currentState();
|
|
132
116
|
var isShowingDiff = Boolean(api === null || api === void 0 || (_api$showDiff = api.showDiff) === null || _api$showDiff === void 0 || (_api$showDiff = _api$showDiff.sharedState.currentState()) === null || _api$showDiff === void 0 ? void 0 : _api$showDiff.isDisplayingChanges);
|
|
133
|
-
var syncBlockPlaceholderDecorations = !(compositionPluginState !== null && compositionPluginState !== void 0 && compositionPluginState.isComposing) && !isShowingDiff ? sourceSyncBlockPlaceholderDecorations : undefined;
|
|
134
117
|
if (hasPlaceholder && ((placeholderText !== null && placeholderText !== void 0 ? placeholderText : '') || placeholderPrompts || placeholderADF || contextPlaceholderADF) && pos !== undefined && !(compositionPluginState !== null && compositionPluginState !== void 0 && compositionPluginState.isComposing) && !isShowingDiff) {
|
|
135
|
-
var _syncBlockPlaceholder;
|
|
136
118
|
var initialDelayWhenUserTypedAndDeleted = typedAndDeleted ? _constants.TYPEWRITER_TYPED_AND_DELETED_DELAY : 0;
|
|
137
119
|
// contextPlaceholderADF takes precedence over the global placeholderADF
|
|
138
120
|
var placeholderAdfToUse = contextPlaceholderADF || placeholderADF;
|
|
139
|
-
return (0, _decorations.createPlaceholderDecoration)(editorState, placeholderText !== null && placeholderText !== void 0 ? placeholderText : '', placeholderPrompts, activeTypewriterTimeouts, pos, initialDelayWhenUserTypedAndDeleted, placeholderAdfToUse, showOnEmptyParagraph)
|
|
121
|
+
return (0, _decorations.createPlaceholderDecoration)(editorState, placeholderText !== null && placeholderText !== void 0 ? placeholderText : '', placeholderPrompts, activeTypewriterTimeouts, pos, initialDelayWhenUserTypedAndDeleted, placeholderAdfToUse, showOnEmptyParagraph);
|
|
140
122
|
}
|
|
141
|
-
return
|
|
123
|
+
return;
|
|
142
124
|
}
|
|
143
125
|
},
|
|
144
126
|
view: function view() {
|
|
@@ -199,7 +199,7 @@ function createPlaceHolderStateFrom(_ref3) {
|
|
|
199
199
|
userHadTyped: userHadTyped
|
|
200
200
|
});
|
|
201
201
|
}
|
|
202
|
-
if (_constants.nodeTypesWithSyncBlockPlaceholderText.includes(parentType) && isEmptyNode && (0, _experiments.editorExperiment)('platform_synced_block', true)
|
|
202
|
+
if (_constants.nodeTypesWithSyncBlockPlaceholderText.includes(parentType) && isEmptyNode && (0, _experiments.editorExperiment)('platform_synced_block', true)) {
|
|
203
203
|
return setPlaceHolderState({
|
|
204
204
|
placeholderText: intl.formatMessage(_messages.placeholderTextMessages.sourceSyncBlockPlaceholderText),
|
|
205
205
|
pos: $from.pos,
|
|
@@ -3,7 +3,6 @@ import { expVal } from '@atlaskit/tmp-editor-statsig/expVal';
|
|
|
3
3
|
import { EMPTY_PARAGRAPH_TIMEOUT_DELAY, pluginKey } from '../placeholderPlugin';
|
|
4
4
|
import { TYPEWRITER_TYPED_AND_DELETED_DELAY } from './constants';
|
|
5
5
|
import { createPlaceholderDecoration } from './decorations';
|
|
6
|
-
import { createSourceSyncBlockPlaceholderDecorations, updateSourceSyncBlockPlaceholderDecorations } from './source-sync-block-placeholder-decorations';
|
|
7
6
|
import { calculateUserInteractionState, createPlaceHolderStateFrom, getPlaceholderState } from './utils';
|
|
8
7
|
export default function createPlugin(intl, defaultPlaceholderText, bracketPlaceholderText, emptyLinePlaceholder, placeholderPrompts, withEmptyParagraph, initialIsPlaceholderHidden, placeholderADF, isRovoLLMEnabled, api) {
|
|
9
8
|
if (!defaultPlaceholderText && !placeholderPrompts && !bracketPlaceholderText && !placeholderADF) {
|
|
@@ -20,25 +19,22 @@ export default function createPlugin(intl, defaultPlaceholderText, bracketPlaceh
|
|
|
20
19
|
state: {
|
|
21
20
|
init: (_, state) => {
|
|
22
21
|
var _api$focus, _api$focus$sharedStat, _api$typeAhead;
|
|
23
|
-
return {
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
}),
|
|
40
|
-
sourceSyncBlockPlaceholderDecorations: createSourceSyncBlockPlaceholderDecorations(state, intl)
|
|
41
|
-
};
|
|
22
|
+
return createPlaceHolderStateFrom({
|
|
23
|
+
isInitial: true,
|
|
24
|
+
isEditorFocused: Boolean(api === null || api === void 0 ? void 0 : (_api$focus = api.focus) === null || _api$focus === void 0 ? void 0 : (_api$focus$sharedStat = _api$focus.sharedState.currentState()) === null || _api$focus$sharedStat === void 0 ? void 0 : _api$focus$sharedStat.hasFocus),
|
|
25
|
+
editorState: state,
|
|
26
|
+
isTypeAheadOpen: api === null || api === void 0 ? void 0 : (_api$typeAhead = api.typeAhead) === null || _api$typeAhead === void 0 ? void 0 : _api$typeAhead.actions.isOpen,
|
|
27
|
+
defaultPlaceholderText,
|
|
28
|
+
bracketPlaceholderText,
|
|
29
|
+
emptyLinePlaceholder,
|
|
30
|
+
placeholderADF,
|
|
31
|
+
placeholderPrompts,
|
|
32
|
+
typedAndDeleted: false,
|
|
33
|
+
userHadTyped: false,
|
|
34
|
+
intl,
|
|
35
|
+
withEmptyParagraph,
|
|
36
|
+
isPlaceholderHidden: initialIsPlaceholderHidden
|
|
37
|
+
});
|
|
42
38
|
},
|
|
43
39
|
apply: (tr, placeholderState, _oldEditorState, newEditorState) => {
|
|
44
40
|
var _api$focus2, _api$focus2$sharedSta, _placeholderState$isP, _api$typeAhead2, _ref, _meta$placeholderText, _ref2, _meta$placeholderProm, _meta$showOnEmptyPara;
|
|
@@ -65,31 +61,22 @@ export default function createPlugin(intl, defaultPlaceholderText, bracketPlaceh
|
|
|
65
61
|
defaultPlaceholderText = meta.placeholderText;
|
|
66
62
|
}
|
|
67
63
|
}
|
|
68
|
-
const newPlaceholderState = {
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
}),
|
|
85
|
-
sourceSyncBlockPlaceholderDecorations: updateSourceSyncBlockPlaceholderDecorations({
|
|
86
|
-
currentDecorationSet: placeholderState === null || placeholderState === void 0 ? void 0 : placeholderState.sourceSyncBlockPlaceholderDecorations,
|
|
87
|
-
intl,
|
|
88
|
-
newEditorState,
|
|
89
|
-
oldEditorState: _oldEditorState,
|
|
90
|
-
tr
|
|
91
|
-
})
|
|
92
|
-
};
|
|
64
|
+
const newPlaceholderState = createPlaceHolderStateFrom({
|
|
65
|
+
isEditorFocused,
|
|
66
|
+
editorState: newEditorState,
|
|
67
|
+
isTypeAheadOpen: api === null || api === void 0 ? void 0 : (_api$typeAhead2 = api.typeAhead) === null || _api$typeAhead2 === void 0 ? void 0 : _api$typeAhead2.actions.isOpen,
|
|
68
|
+
defaultPlaceholderText: withEmptyParagraph ? defaultPlaceholderText : (_ref = (_meta$placeholderText = meta === null || meta === void 0 ? void 0 : meta.placeholderText) !== null && _meta$placeholderText !== void 0 ? _meta$placeholderText : placeholderState === null || placeholderState === void 0 ? void 0 : placeholderState.placeholderText) !== null && _ref !== void 0 ? _ref : defaultPlaceholderText,
|
|
69
|
+
bracketPlaceholderText,
|
|
70
|
+
emptyLinePlaceholder,
|
|
71
|
+
placeholderADF,
|
|
72
|
+
placeholderPrompts: (_ref2 = (_meta$placeholderProm = meta === null || meta === void 0 ? void 0 : meta.placeholderPrompts) !== null && _meta$placeholderProm !== void 0 ? _meta$placeholderProm : placeholderState === null || placeholderState === void 0 ? void 0 : placeholderState.placeholderPrompts) !== null && _ref2 !== void 0 ? _ref2 : placeholderPrompts,
|
|
73
|
+
typedAndDeleted,
|
|
74
|
+
userHadTyped,
|
|
75
|
+
intl,
|
|
76
|
+
isPlaceholderHidden,
|
|
77
|
+
withEmptyParagraph,
|
|
78
|
+
showOnEmptyParagraph: (_meta$showOnEmptyPara = meta === null || meta === void 0 ? void 0 : meta.showOnEmptyParagraph) !== null && _meta$showOnEmptyPara !== void 0 ? _meta$showOnEmptyPara : placeholderState === null || placeholderState === void 0 ? void 0 : placeholderState.showOnEmptyParagraph
|
|
79
|
+
});
|
|
93
80
|
|
|
94
81
|
// Clear timeouts when hasPlaceholder becomes false
|
|
95
82
|
if (!newPlaceholderState.hasPlaceholder) {
|
|
@@ -111,8 +98,7 @@ export default function createPlugin(intl, defaultPlaceholderText, bracketPlaceh
|
|
|
111
98
|
pos,
|
|
112
99
|
typedAndDeleted,
|
|
113
100
|
contextPlaceholderADF,
|
|
114
|
-
showOnEmptyParagraph
|
|
115
|
-
sourceSyncBlockPlaceholderDecorations
|
|
101
|
+
showOnEmptyParagraph
|
|
116
102
|
} = getPlaceholderState(editorState);
|
|
117
103
|
|
|
118
104
|
// Decorations is still called after plugin is destroyed
|
|
@@ -122,15 +108,13 @@ export default function createPlugin(intl, defaultPlaceholderText, bracketPlaceh
|
|
|
122
108
|
}
|
|
123
109
|
const compositionPluginState = api === null || api === void 0 ? void 0 : (_api$composition = api.composition) === null || _api$composition === void 0 ? void 0 : _api$composition.sharedState.currentState();
|
|
124
110
|
const isShowingDiff = Boolean(api === null || api === void 0 ? void 0 : (_api$showDiff = api.showDiff) === null || _api$showDiff === void 0 ? void 0 : (_api$showDiff$sharedS = _api$showDiff.sharedState.currentState()) === null || _api$showDiff$sharedS === void 0 ? void 0 : _api$showDiff$sharedS.isDisplayingChanges);
|
|
125
|
-
const syncBlockPlaceholderDecorations = !(compositionPluginState !== null && compositionPluginState !== void 0 && compositionPluginState.isComposing) && !isShowingDiff ? sourceSyncBlockPlaceholderDecorations : undefined;
|
|
126
111
|
if (hasPlaceholder && ((placeholderText !== null && placeholderText !== void 0 ? placeholderText : '') || placeholderPrompts || placeholderADF || contextPlaceholderADF) && pos !== undefined && !(compositionPluginState !== null && compositionPluginState !== void 0 && compositionPluginState.isComposing) && !isShowingDiff) {
|
|
127
|
-
var _syncBlockPlaceholder;
|
|
128
112
|
const initialDelayWhenUserTypedAndDeleted = typedAndDeleted ? TYPEWRITER_TYPED_AND_DELETED_DELAY : 0;
|
|
129
113
|
// contextPlaceholderADF takes precedence over the global placeholderADF
|
|
130
114
|
const placeholderAdfToUse = contextPlaceholderADF || placeholderADF;
|
|
131
|
-
return createPlaceholderDecoration(editorState, placeholderText !== null && placeholderText !== void 0 ? placeholderText : '', placeholderPrompts, activeTypewriterTimeouts, pos, initialDelayWhenUserTypedAndDeleted, placeholderAdfToUse, showOnEmptyParagraph)
|
|
115
|
+
return createPlaceholderDecoration(editorState, placeholderText !== null && placeholderText !== void 0 ? placeholderText : '', placeholderPrompts, activeTypewriterTimeouts, pos, initialDelayWhenUserTypedAndDeleted, placeholderAdfToUse, showOnEmptyParagraph);
|
|
132
116
|
}
|
|
133
|
-
return
|
|
117
|
+
return;
|
|
134
118
|
}
|
|
135
119
|
},
|
|
136
120
|
view() {
|
|
@@ -187,7 +187,7 @@ export function createPlaceHolderStateFrom({
|
|
|
187
187
|
userHadTyped
|
|
188
188
|
});
|
|
189
189
|
}
|
|
190
|
-
if (nodeTypesWithSyncBlockPlaceholderText.includes(parentType) && isEmptyNode && editorExperiment('platform_synced_block', true)
|
|
190
|
+
if (nodeTypesWithSyncBlockPlaceholderText.includes(parentType) && isEmptyNode && editorExperiment('platform_synced_block', true)) {
|
|
191
191
|
return setPlaceHolderState({
|
|
192
192
|
placeholderText: intl.formatMessage(messages.sourceSyncBlockPlaceholderText),
|
|
193
193
|
pos: $from.pos,
|
|
@@ -1,12 +1,8 @@
|
|
|
1
|
-
import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
2
|
-
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
3
|
-
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; }
|
|
4
1
|
import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
|
|
5
2
|
import { expVal } from '@atlaskit/tmp-editor-statsig/expVal';
|
|
6
3
|
import { EMPTY_PARAGRAPH_TIMEOUT_DELAY, pluginKey } from '../placeholderPlugin';
|
|
7
4
|
import { TYPEWRITER_TYPED_AND_DELETED_DELAY } from './constants';
|
|
8
5
|
import { createPlaceholderDecoration } from './decorations';
|
|
9
|
-
import { createSourceSyncBlockPlaceholderDecorations, updateSourceSyncBlockPlaceholderDecorations } from './source-sync-block-placeholder-decorations';
|
|
10
6
|
import { calculateUserInteractionState, createPlaceHolderStateFrom, getPlaceholderState } from './utils';
|
|
11
7
|
export default function createPlugin(intl, defaultPlaceholderText, bracketPlaceholderText, emptyLinePlaceholder, placeholderPrompts, withEmptyParagraph, initialIsPlaceholderHidden, placeholderADF, isRovoLLMEnabled, api) {
|
|
12
8
|
if (!defaultPlaceholderText && !placeholderPrompts && !bracketPlaceholderText && !placeholderADF) {
|
|
@@ -25,7 +21,7 @@ export default function createPlugin(intl, defaultPlaceholderText, bracketPlaceh
|
|
|
25
21
|
state: {
|
|
26
22
|
init: function init(_, state) {
|
|
27
23
|
var _api$focus, _api$typeAhead;
|
|
28
|
-
return
|
|
24
|
+
return createPlaceHolderStateFrom({
|
|
29
25
|
isInitial: true,
|
|
30
26
|
isEditorFocused: Boolean(api === null || api === void 0 || (_api$focus = api.focus) === null || _api$focus === void 0 || (_api$focus = _api$focus.sharedState.currentState()) === null || _api$focus === void 0 ? void 0 : _api$focus.hasFocus),
|
|
31
27
|
editorState: state,
|
|
@@ -40,8 +36,6 @@ export default function createPlugin(intl, defaultPlaceholderText, bracketPlaceh
|
|
|
40
36
|
intl: intl,
|
|
41
37
|
withEmptyParagraph: withEmptyParagraph,
|
|
42
38
|
isPlaceholderHidden: initialIsPlaceholderHidden
|
|
43
|
-
})), {}, {
|
|
44
|
-
sourceSyncBlockPlaceholderDecorations: createSourceSyncBlockPlaceholderDecorations(state, intl)
|
|
45
39
|
});
|
|
46
40
|
},
|
|
47
41
|
apply: function apply(tr, placeholderState, _oldEditorState, newEditorState) {
|
|
@@ -68,7 +62,7 @@ export default function createPlugin(intl, defaultPlaceholderText, bracketPlaceh
|
|
|
68
62
|
defaultPlaceholderText = meta.placeholderText;
|
|
69
63
|
}
|
|
70
64
|
}
|
|
71
|
-
var newPlaceholderState =
|
|
65
|
+
var newPlaceholderState = createPlaceHolderStateFrom({
|
|
72
66
|
isEditorFocused: isEditorFocused,
|
|
73
67
|
editorState: newEditorState,
|
|
74
68
|
isTypeAheadOpen: api === null || api === void 0 || (_api$typeAhead2 = api.typeAhead) === null || _api$typeAhead2 === void 0 ? void 0 : _api$typeAhead2.actions.isOpen,
|
|
@@ -83,14 +77,6 @@ export default function createPlugin(intl, defaultPlaceholderText, bracketPlaceh
|
|
|
83
77
|
isPlaceholderHidden: isPlaceholderHidden,
|
|
84
78
|
withEmptyParagraph: withEmptyParagraph,
|
|
85
79
|
showOnEmptyParagraph: (_meta$showOnEmptyPara = meta === null || meta === void 0 ? void 0 : meta.showOnEmptyParagraph) !== null && _meta$showOnEmptyPara !== void 0 ? _meta$showOnEmptyPara : placeholderState === null || placeholderState === void 0 ? void 0 : placeholderState.showOnEmptyParagraph
|
|
86
|
-
})), {}, {
|
|
87
|
-
sourceSyncBlockPlaceholderDecorations: updateSourceSyncBlockPlaceholderDecorations({
|
|
88
|
-
currentDecorationSet: placeholderState === null || placeholderState === void 0 ? void 0 : placeholderState.sourceSyncBlockPlaceholderDecorations,
|
|
89
|
-
intl: intl,
|
|
90
|
-
newEditorState: newEditorState,
|
|
91
|
-
oldEditorState: _oldEditorState,
|
|
92
|
-
tr: tr
|
|
93
|
-
})
|
|
94
80
|
});
|
|
95
81
|
|
|
96
82
|
// Clear timeouts when hasPlaceholder becomes false
|
|
@@ -113,8 +99,7 @@ export default function createPlugin(intl, defaultPlaceholderText, bracketPlaceh
|
|
|
113
99
|
pos = _getPlaceholderState.pos,
|
|
114
100
|
typedAndDeleted = _getPlaceholderState.typedAndDeleted,
|
|
115
101
|
contextPlaceholderADF = _getPlaceholderState.contextPlaceholderADF,
|
|
116
|
-
showOnEmptyParagraph = _getPlaceholderState.showOnEmptyParagraph
|
|
117
|
-
sourceSyncBlockPlaceholderDecorations = _getPlaceholderState.sourceSyncBlockPlaceholderDecorations;
|
|
102
|
+
showOnEmptyParagraph = _getPlaceholderState.showOnEmptyParagraph;
|
|
118
103
|
|
|
119
104
|
// Decorations is still called after plugin is destroyed
|
|
120
105
|
// So we need to make sure decorations is not called if plugin has been destroyed to prevent the placeholder animations' setTimeouts called infinitely
|
|
@@ -123,15 +108,13 @@ export default function createPlugin(intl, defaultPlaceholderText, bracketPlaceh
|
|
|
123
108
|
}
|
|
124
109
|
var compositionPluginState = api === null || api === void 0 || (_api$composition = api.composition) === null || _api$composition === void 0 ? void 0 : _api$composition.sharedState.currentState();
|
|
125
110
|
var isShowingDiff = Boolean(api === null || api === void 0 || (_api$showDiff = api.showDiff) === null || _api$showDiff === void 0 || (_api$showDiff = _api$showDiff.sharedState.currentState()) === null || _api$showDiff === void 0 ? void 0 : _api$showDiff.isDisplayingChanges);
|
|
126
|
-
var syncBlockPlaceholderDecorations = !(compositionPluginState !== null && compositionPluginState !== void 0 && compositionPluginState.isComposing) && !isShowingDiff ? sourceSyncBlockPlaceholderDecorations : undefined;
|
|
127
111
|
if (hasPlaceholder && ((placeholderText !== null && placeholderText !== void 0 ? placeholderText : '') || placeholderPrompts || placeholderADF || contextPlaceholderADF) && pos !== undefined && !(compositionPluginState !== null && compositionPluginState !== void 0 && compositionPluginState.isComposing) && !isShowingDiff) {
|
|
128
|
-
var _syncBlockPlaceholder;
|
|
129
112
|
var initialDelayWhenUserTypedAndDeleted = typedAndDeleted ? TYPEWRITER_TYPED_AND_DELETED_DELAY : 0;
|
|
130
113
|
// contextPlaceholderADF takes precedence over the global placeholderADF
|
|
131
114
|
var placeholderAdfToUse = contextPlaceholderADF || placeholderADF;
|
|
132
|
-
return createPlaceholderDecoration(editorState, placeholderText !== null && placeholderText !== void 0 ? placeholderText : '', placeholderPrompts, activeTypewriterTimeouts, pos, initialDelayWhenUserTypedAndDeleted, placeholderAdfToUse, showOnEmptyParagraph)
|
|
115
|
+
return createPlaceholderDecoration(editorState, placeholderText !== null && placeholderText !== void 0 ? placeholderText : '', placeholderPrompts, activeTypewriterTimeouts, pos, initialDelayWhenUserTypedAndDeleted, placeholderAdfToUse, showOnEmptyParagraph);
|
|
133
116
|
}
|
|
134
|
-
return
|
|
117
|
+
return;
|
|
135
118
|
}
|
|
136
119
|
},
|
|
137
120
|
view: function view() {
|
|
@@ -188,7 +188,7 @@ export function createPlaceHolderStateFrom(_ref3) {
|
|
|
188
188
|
userHadTyped: userHadTyped
|
|
189
189
|
});
|
|
190
190
|
}
|
|
191
|
-
if (nodeTypesWithSyncBlockPlaceholderText.includes(parentType) && isEmptyNode && editorExperiment('platform_synced_block', true)
|
|
191
|
+
if (nodeTypesWithSyncBlockPlaceholderText.includes(parentType) && isEmptyNode && editorExperiment('platform_synced_block', true)) {
|
|
192
192
|
return setPlaceHolderState({
|
|
193
193
|
placeholderText: intl.formatMessage(messages.sourceSyncBlockPlaceholderText),
|
|
194
194
|
pos: $from.pos,
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
import type { IntlShape } from 'react-intl';
|
|
2
2
|
import type { DocNode } from '@atlaskit/adf-schema';
|
|
3
3
|
import type { EditorState } from '@atlaskit/editor-prosemirror/state';
|
|
4
|
-
import type { DecorationSet } from '@atlaskit/editor-prosemirror/view';
|
|
5
4
|
export interface PlaceHolderState {
|
|
6
5
|
canShowOnEmptyParagraph?: boolean;
|
|
7
6
|
contextPlaceholderADF?: DocNode;
|
|
@@ -11,7 +10,6 @@ export interface PlaceHolderState {
|
|
|
11
10
|
placeholderText?: string;
|
|
12
11
|
pos?: number;
|
|
13
12
|
showOnEmptyParagraph?: boolean;
|
|
14
|
-
sourceSyncBlockPlaceholderDecorations?: DecorationSet;
|
|
15
13
|
typedAndDeleted?: boolean;
|
|
16
14
|
userHadTyped?: boolean;
|
|
17
15
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/editor-plugin-placeholder",
|
|
3
|
-
"version": "12.0.
|
|
3
|
+
"version": "12.0.35",
|
|
4
4
|
"description": "Placeholder plugin for @atlaskit/editor-core.",
|
|
5
5
|
"author": "Atlassian Pty Ltd",
|
|
6
6
|
"license": "Apache-2.0",
|
|
@@ -23,18 +23,18 @@
|
|
|
23
23
|
"@atlaskit/css": "^1.0.0",
|
|
24
24
|
"@atlaskit/editor-plugin-composition": "^11.0.0",
|
|
25
25
|
"@atlaskit/editor-plugin-focus": "^11.0.0",
|
|
26
|
-
"@atlaskit/editor-plugin-show-diff": "^10.
|
|
26
|
+
"@atlaskit/editor-plugin-show-diff": "^10.6.0",
|
|
27
27
|
"@atlaskit/editor-plugin-type-ahead": "^13.0.0",
|
|
28
28
|
"@atlaskit/editor-prosemirror": "^8.0.0",
|
|
29
29
|
"@atlaskit/platform-feature-flags": "^2.1.0",
|
|
30
|
-
"@atlaskit/primitives": "^22.
|
|
30
|
+
"@atlaskit/primitives": "^22.2.0",
|
|
31
31
|
"@atlaskit/spinner": "^20.1.0",
|
|
32
|
-
"@atlaskit/tmp-editor-statsig": "^132.
|
|
33
|
-
"@atlaskit/tokens": "^16.
|
|
32
|
+
"@atlaskit/tmp-editor-statsig": "^132.6.0",
|
|
33
|
+
"@atlaskit/tokens": "^16.3.0",
|
|
34
34
|
"@babel/runtime": "^7.0.0"
|
|
35
35
|
},
|
|
36
36
|
"peerDependencies": {
|
|
37
|
-
"@atlaskit/editor-common": "^116.
|
|
37
|
+
"@atlaskit/editor-common": "^116.38.0",
|
|
38
38
|
"react": "^18.2.0",
|
|
39
39
|
"react-dom": "^18.2.0",
|
|
40
40
|
"react-intl": "^5.25.1 || ^6.0.0 || ^7.0.0"
|
|
@@ -1,132 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
exports.createSourceSyncBlockPlaceholderDecorations = createSourceSyncBlockPlaceholderDecorations;
|
|
7
|
-
exports.updateSourceSyncBlockPlaceholderDecorations = updateSourceSyncBlockPlaceholderDecorations;
|
|
8
|
-
var _messages = require("@atlaskit/editor-common/messages");
|
|
9
|
-
var _view = require("@atlaskit/editor-prosemirror/view");
|
|
10
|
-
var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
|
|
11
|
-
var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
|
|
12
|
-
var _constants = require("./constants");
|
|
13
|
-
var isEmptySourceSyncBlock = function isEmptySourceSyncBlock(node) {
|
|
14
|
-
var _node$firstChild, _node$firstChild2;
|
|
15
|
-
return _constants.nodeTypesWithSyncBlockPlaceholderText.includes(node.type.name) && node.childCount === 1 && ((_node$firstChild = node.firstChild) === null || _node$firstChild === void 0 ? void 0 : _node$firstChild.content.size) === 0 && ((_node$firstChild2 = node.firstChild) === null || _node$firstChild2 === void 0 ? void 0 : _node$firstChild2.type.name) === 'paragraph';
|
|
16
|
-
};
|
|
17
|
-
var createSourceSyncBlockPlaceholderElement = function createSourceSyncBlockPlaceholderElement(intl) {
|
|
18
|
-
var placeholderDecoration = document.createElement('span');
|
|
19
|
-
placeholderDecoration.setAttribute('data-testid', _constants.placeholderTestId);
|
|
20
|
-
placeholderDecoration.className = 'placeholder-decoration';
|
|
21
|
-
placeholderDecoration.setAttribute('aria-hidden', 'true');
|
|
22
|
-
placeholderDecoration.textContent = intl.formatMessage(_messages.placeholderTextMessages.sourceSyncBlockPlaceholderText);
|
|
23
|
-
return placeholderDecoration;
|
|
24
|
-
};
|
|
25
|
-
var createSourceSyncBlockPlaceholderDecoration = function createSourceSyncBlockPlaceholderDecoration(pos, intl) {
|
|
26
|
-
return _view.Decoration.widget(pos + 2, function () {
|
|
27
|
-
return createSourceSyncBlockPlaceholderElement(intl);
|
|
28
|
-
}, {
|
|
29
|
-
side: 0,
|
|
30
|
-
key: "source-sync-block-placeholder-".concat(pos)
|
|
31
|
-
});
|
|
32
|
-
};
|
|
33
|
-
var isSourceSyncBlockPlaceholderEnabled = function isSourceSyncBlockPlaceholderEnabled() {
|
|
34
|
-
return (0, _expValEquals.expValEquals)('platform_editor_sync_block_activation', 'isEnabled', true) && (0, _experiments.editorExperiment)('platform_synced_block', true);
|
|
35
|
-
};
|
|
36
|
-
var getChangedRanges = function getChangedRanges(tr) {
|
|
37
|
-
var ranges = [];
|
|
38
|
-
tr.mapping.maps.forEach(function (stepMap, index) {
|
|
39
|
-
stepMap.forEach(function (_oldStart, _oldEnd, newStart, newEnd) {
|
|
40
|
-
var mappingAfterStep = tr.mapping.slice(index + 1);
|
|
41
|
-
ranges.push({
|
|
42
|
-
from: mappingAfterStep.map(newStart, -1),
|
|
43
|
-
to: mappingAfterStep.map(newEnd, 1)
|
|
44
|
-
});
|
|
45
|
-
});
|
|
46
|
-
});
|
|
47
|
-
return ranges;
|
|
48
|
-
};
|
|
49
|
-
var getSourceSyncBlockRange = function getSourceSyncBlockRange(doc, pos) {
|
|
50
|
-
var resolvedPos = doc.resolve(Math.max(0, Math.min(pos, doc.content.size)));
|
|
51
|
-
for (var depth = resolvedPos.depth; depth > 0; depth--) {
|
|
52
|
-
var node = resolvedPos.node(depth);
|
|
53
|
-
if (_constants.nodeTypesWithSyncBlockPlaceholderText.includes(node.type.name)) {
|
|
54
|
-
return {
|
|
55
|
-
from: resolvedPos.before(depth),
|
|
56
|
-
to: resolvedPos.after(depth)
|
|
57
|
-
};
|
|
58
|
-
}
|
|
59
|
-
}
|
|
60
|
-
return;
|
|
61
|
-
};
|
|
62
|
-
var getAffectedSourceSyncBlockRanges = function getAffectedSourceSyncBlockRanges(doc, ranges) {
|
|
63
|
-
var affectedRanges = new Map();
|
|
64
|
-
ranges.forEach(function (_ref) {
|
|
65
|
-
var from = _ref.from,
|
|
66
|
-
to = _ref.to;
|
|
67
|
-
[from, to].forEach(function (pos) {
|
|
68
|
-
var sourceSyncBlockRange = getSourceSyncBlockRange(doc, pos);
|
|
69
|
-
if (sourceSyncBlockRange) {
|
|
70
|
-
affectedRanges.set("".concat(sourceSyncBlockRange.from, "-").concat(sourceSyncBlockRange.to), sourceSyncBlockRange);
|
|
71
|
-
}
|
|
72
|
-
});
|
|
73
|
-
doc.nodesBetween(from, to, function (node, pos) {
|
|
74
|
-
if (_constants.nodeTypesWithSyncBlockPlaceholderText.includes(node.type.name)) {
|
|
75
|
-
var sourceSyncBlockRange = {
|
|
76
|
-
from: pos,
|
|
77
|
-
to: pos + node.nodeSize
|
|
78
|
-
};
|
|
79
|
-
affectedRanges.set("".concat(sourceSyncBlockRange.from, "-").concat(sourceSyncBlockRange.to), sourceSyncBlockRange);
|
|
80
|
-
return false;
|
|
81
|
-
}
|
|
82
|
-
return true;
|
|
83
|
-
});
|
|
84
|
-
});
|
|
85
|
-
return Array.from(affectedRanges.values());
|
|
86
|
-
};
|
|
87
|
-
function createSourceSyncBlockPlaceholderDecorations(editorState, intl) {
|
|
88
|
-
if (!isSourceSyncBlockPlaceholderEnabled()) {
|
|
89
|
-
return;
|
|
90
|
-
}
|
|
91
|
-
var decorations = [];
|
|
92
|
-
editorState.doc.descendants(function (node, pos) {
|
|
93
|
-
if (isEmptySourceSyncBlock(node)) {
|
|
94
|
-
decorations.push(createSourceSyncBlockPlaceholderDecoration(pos, intl));
|
|
95
|
-
return false;
|
|
96
|
-
}
|
|
97
|
-
return true;
|
|
98
|
-
});
|
|
99
|
-
return decorations.length > 0 ? _view.DecorationSet.create(editorState.doc, decorations) : _view.DecorationSet.empty;
|
|
100
|
-
}
|
|
101
|
-
function updateSourceSyncBlockPlaceholderDecorations(_ref2) {
|
|
102
|
-
var currentDecorationSet = _ref2.currentDecorationSet,
|
|
103
|
-
intl = _ref2.intl,
|
|
104
|
-
newEditorState = _ref2.newEditorState,
|
|
105
|
-
oldEditorState = _ref2.oldEditorState,
|
|
106
|
-
tr = _ref2.tr;
|
|
107
|
-
if (!isSourceSyncBlockPlaceholderEnabled()) {
|
|
108
|
-
return;
|
|
109
|
-
}
|
|
110
|
-
if (!currentDecorationSet) {
|
|
111
|
-
return createSourceSyncBlockPlaceholderDecorations(newEditorState, intl);
|
|
112
|
-
}
|
|
113
|
-
if (!tr.docChanged) {
|
|
114
|
-
return tr.mapping.maps.length > 0 ? currentDecorationSet.map(tr.mapping, newEditorState.doc) : currentDecorationSet;
|
|
115
|
-
}
|
|
116
|
-
var mappedDecorationSet = currentDecorationSet.map(tr.mapping, newEditorState.doc);
|
|
117
|
-
var affectedRanges = getAffectedSourceSyncBlockRanges(newEditorState.doc, getChangedRanges(tr));
|
|
118
|
-
if (affectedRanges.length === 0) {
|
|
119
|
-
return mappedDecorationSet;
|
|
120
|
-
}
|
|
121
|
-
var decorationsToRemove = affectedRanges.flatMap(function (_ref3) {
|
|
122
|
-
var from = _ref3.from,
|
|
123
|
-
to = _ref3.to;
|
|
124
|
-
return mappedDecorationSet.find(from, to);
|
|
125
|
-
});
|
|
126
|
-
var decorationsToAdd = affectedRanges.flatMap(function (_ref4) {
|
|
127
|
-
var from = _ref4.from;
|
|
128
|
-
var node = newEditorState.doc.nodeAt(from);
|
|
129
|
-
return node && isEmptySourceSyncBlock(node) ? [createSourceSyncBlockPlaceholderDecoration(from, intl)] : [];
|
|
130
|
-
});
|
|
131
|
-
return mappedDecorationSet.remove(decorationsToRemove).add(newEditorState.doc, decorationsToAdd);
|
|
132
|
-
}
|
|
@@ -1,121 +0,0 @@
|
|
|
1
|
-
import { placeholderTextMessages as messages } from '@atlaskit/editor-common/messages';
|
|
2
|
-
import { Decoration, DecorationSet } from '@atlaskit/editor-prosemirror/view';
|
|
3
|
-
import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
|
|
4
|
-
import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
|
|
5
|
-
import { nodeTypesWithSyncBlockPlaceholderText, placeholderTestId } from './constants';
|
|
6
|
-
const isEmptySourceSyncBlock = node => {
|
|
7
|
-
var _node$firstChild, _node$firstChild2;
|
|
8
|
-
return nodeTypesWithSyncBlockPlaceholderText.includes(node.type.name) && node.childCount === 1 && ((_node$firstChild = node.firstChild) === null || _node$firstChild === void 0 ? void 0 : _node$firstChild.content.size) === 0 && ((_node$firstChild2 = node.firstChild) === null || _node$firstChild2 === void 0 ? void 0 : _node$firstChild2.type.name) === 'paragraph';
|
|
9
|
-
};
|
|
10
|
-
const createSourceSyncBlockPlaceholderElement = intl => {
|
|
11
|
-
const placeholderDecoration = document.createElement('span');
|
|
12
|
-
placeholderDecoration.setAttribute('data-testid', placeholderTestId);
|
|
13
|
-
placeholderDecoration.className = 'placeholder-decoration';
|
|
14
|
-
placeholderDecoration.setAttribute('aria-hidden', 'true');
|
|
15
|
-
placeholderDecoration.textContent = intl.formatMessage(messages.sourceSyncBlockPlaceholderText);
|
|
16
|
-
return placeholderDecoration;
|
|
17
|
-
};
|
|
18
|
-
const createSourceSyncBlockPlaceholderDecoration = (pos, intl) => Decoration.widget(pos + 2, () => createSourceSyncBlockPlaceholderElement(intl), {
|
|
19
|
-
side: 0,
|
|
20
|
-
key: `source-sync-block-placeholder-${pos}`
|
|
21
|
-
});
|
|
22
|
-
const isSourceSyncBlockPlaceholderEnabled = () => expValEquals('platform_editor_sync_block_activation', 'isEnabled', true) && editorExperiment('platform_synced_block', true);
|
|
23
|
-
const getChangedRanges = tr => {
|
|
24
|
-
const ranges = [];
|
|
25
|
-
tr.mapping.maps.forEach((stepMap, index) => {
|
|
26
|
-
stepMap.forEach((_oldStart, _oldEnd, newStart, newEnd) => {
|
|
27
|
-
const mappingAfterStep = tr.mapping.slice(index + 1);
|
|
28
|
-
ranges.push({
|
|
29
|
-
from: mappingAfterStep.map(newStart, -1),
|
|
30
|
-
to: mappingAfterStep.map(newEnd, 1)
|
|
31
|
-
});
|
|
32
|
-
});
|
|
33
|
-
});
|
|
34
|
-
return ranges;
|
|
35
|
-
};
|
|
36
|
-
const getSourceSyncBlockRange = (doc, pos) => {
|
|
37
|
-
const resolvedPos = doc.resolve(Math.max(0, Math.min(pos, doc.content.size)));
|
|
38
|
-
for (let depth = resolvedPos.depth; depth > 0; depth--) {
|
|
39
|
-
const node = resolvedPos.node(depth);
|
|
40
|
-
if (nodeTypesWithSyncBlockPlaceholderText.includes(node.type.name)) {
|
|
41
|
-
return {
|
|
42
|
-
from: resolvedPos.before(depth),
|
|
43
|
-
to: resolvedPos.after(depth)
|
|
44
|
-
};
|
|
45
|
-
}
|
|
46
|
-
}
|
|
47
|
-
return;
|
|
48
|
-
};
|
|
49
|
-
const getAffectedSourceSyncBlockRanges = (doc, ranges) => {
|
|
50
|
-
const affectedRanges = new Map();
|
|
51
|
-
ranges.forEach(({
|
|
52
|
-
from,
|
|
53
|
-
to
|
|
54
|
-
}) => {
|
|
55
|
-
[from, to].forEach(pos => {
|
|
56
|
-
const sourceSyncBlockRange = getSourceSyncBlockRange(doc, pos);
|
|
57
|
-
if (sourceSyncBlockRange) {
|
|
58
|
-
affectedRanges.set(`${sourceSyncBlockRange.from}-${sourceSyncBlockRange.to}`, sourceSyncBlockRange);
|
|
59
|
-
}
|
|
60
|
-
});
|
|
61
|
-
doc.nodesBetween(from, to, (node, pos) => {
|
|
62
|
-
if (nodeTypesWithSyncBlockPlaceholderText.includes(node.type.name)) {
|
|
63
|
-
const sourceSyncBlockRange = {
|
|
64
|
-
from: pos,
|
|
65
|
-
to: pos + node.nodeSize
|
|
66
|
-
};
|
|
67
|
-
affectedRanges.set(`${sourceSyncBlockRange.from}-${sourceSyncBlockRange.to}`, sourceSyncBlockRange);
|
|
68
|
-
return false;
|
|
69
|
-
}
|
|
70
|
-
return true;
|
|
71
|
-
});
|
|
72
|
-
});
|
|
73
|
-
return Array.from(affectedRanges.values());
|
|
74
|
-
};
|
|
75
|
-
export function createSourceSyncBlockPlaceholderDecorations(editorState, intl) {
|
|
76
|
-
if (!isSourceSyncBlockPlaceholderEnabled()) {
|
|
77
|
-
return;
|
|
78
|
-
}
|
|
79
|
-
const decorations = [];
|
|
80
|
-
editorState.doc.descendants((node, pos) => {
|
|
81
|
-
if (isEmptySourceSyncBlock(node)) {
|
|
82
|
-
decorations.push(createSourceSyncBlockPlaceholderDecoration(pos, intl));
|
|
83
|
-
return false;
|
|
84
|
-
}
|
|
85
|
-
return true;
|
|
86
|
-
});
|
|
87
|
-
return decorations.length > 0 ? DecorationSet.create(editorState.doc, decorations) : DecorationSet.empty;
|
|
88
|
-
}
|
|
89
|
-
export function updateSourceSyncBlockPlaceholderDecorations({
|
|
90
|
-
currentDecorationSet,
|
|
91
|
-
intl,
|
|
92
|
-
newEditorState,
|
|
93
|
-
oldEditorState,
|
|
94
|
-
tr
|
|
95
|
-
}) {
|
|
96
|
-
if (!isSourceSyncBlockPlaceholderEnabled()) {
|
|
97
|
-
return;
|
|
98
|
-
}
|
|
99
|
-
if (!currentDecorationSet) {
|
|
100
|
-
return createSourceSyncBlockPlaceholderDecorations(newEditorState, intl);
|
|
101
|
-
}
|
|
102
|
-
if (!tr.docChanged) {
|
|
103
|
-
return tr.mapping.maps.length > 0 ? currentDecorationSet.map(tr.mapping, newEditorState.doc) : currentDecorationSet;
|
|
104
|
-
}
|
|
105
|
-
const mappedDecorationSet = currentDecorationSet.map(tr.mapping, newEditorState.doc);
|
|
106
|
-
const affectedRanges = getAffectedSourceSyncBlockRanges(newEditorState.doc, getChangedRanges(tr));
|
|
107
|
-
if (affectedRanges.length === 0) {
|
|
108
|
-
return mappedDecorationSet;
|
|
109
|
-
}
|
|
110
|
-
const decorationsToRemove = affectedRanges.flatMap(({
|
|
111
|
-
from,
|
|
112
|
-
to
|
|
113
|
-
}) => mappedDecorationSet.find(from, to));
|
|
114
|
-
const decorationsToAdd = affectedRanges.flatMap(({
|
|
115
|
-
from
|
|
116
|
-
}) => {
|
|
117
|
-
const node = newEditorState.doc.nodeAt(from);
|
|
118
|
-
return node && isEmptySourceSyncBlock(node) ? [createSourceSyncBlockPlaceholderDecoration(from, intl)] : [];
|
|
119
|
-
});
|
|
120
|
-
return mappedDecorationSet.remove(decorationsToRemove).add(newEditorState.doc, decorationsToAdd);
|
|
121
|
-
}
|
|
@@ -1,125 +0,0 @@
|
|
|
1
|
-
import { placeholderTextMessages as messages } from '@atlaskit/editor-common/messages';
|
|
2
|
-
import { Decoration, DecorationSet } from '@atlaskit/editor-prosemirror/view';
|
|
3
|
-
import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
|
|
4
|
-
import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
|
|
5
|
-
import { nodeTypesWithSyncBlockPlaceholderText, placeholderTestId } from './constants';
|
|
6
|
-
var isEmptySourceSyncBlock = function isEmptySourceSyncBlock(node) {
|
|
7
|
-
var _node$firstChild, _node$firstChild2;
|
|
8
|
-
return nodeTypesWithSyncBlockPlaceholderText.includes(node.type.name) && node.childCount === 1 && ((_node$firstChild = node.firstChild) === null || _node$firstChild === void 0 ? void 0 : _node$firstChild.content.size) === 0 && ((_node$firstChild2 = node.firstChild) === null || _node$firstChild2 === void 0 ? void 0 : _node$firstChild2.type.name) === 'paragraph';
|
|
9
|
-
};
|
|
10
|
-
var createSourceSyncBlockPlaceholderElement = function createSourceSyncBlockPlaceholderElement(intl) {
|
|
11
|
-
var placeholderDecoration = document.createElement('span');
|
|
12
|
-
placeholderDecoration.setAttribute('data-testid', placeholderTestId);
|
|
13
|
-
placeholderDecoration.className = 'placeholder-decoration';
|
|
14
|
-
placeholderDecoration.setAttribute('aria-hidden', 'true');
|
|
15
|
-
placeholderDecoration.textContent = intl.formatMessage(messages.sourceSyncBlockPlaceholderText);
|
|
16
|
-
return placeholderDecoration;
|
|
17
|
-
};
|
|
18
|
-
var createSourceSyncBlockPlaceholderDecoration = function createSourceSyncBlockPlaceholderDecoration(pos, intl) {
|
|
19
|
-
return Decoration.widget(pos + 2, function () {
|
|
20
|
-
return createSourceSyncBlockPlaceholderElement(intl);
|
|
21
|
-
}, {
|
|
22
|
-
side: 0,
|
|
23
|
-
key: "source-sync-block-placeholder-".concat(pos)
|
|
24
|
-
});
|
|
25
|
-
};
|
|
26
|
-
var isSourceSyncBlockPlaceholderEnabled = function isSourceSyncBlockPlaceholderEnabled() {
|
|
27
|
-
return expValEquals('platform_editor_sync_block_activation', 'isEnabled', true) && editorExperiment('platform_synced_block', true);
|
|
28
|
-
};
|
|
29
|
-
var getChangedRanges = function getChangedRanges(tr) {
|
|
30
|
-
var ranges = [];
|
|
31
|
-
tr.mapping.maps.forEach(function (stepMap, index) {
|
|
32
|
-
stepMap.forEach(function (_oldStart, _oldEnd, newStart, newEnd) {
|
|
33
|
-
var mappingAfterStep = tr.mapping.slice(index + 1);
|
|
34
|
-
ranges.push({
|
|
35
|
-
from: mappingAfterStep.map(newStart, -1),
|
|
36
|
-
to: mappingAfterStep.map(newEnd, 1)
|
|
37
|
-
});
|
|
38
|
-
});
|
|
39
|
-
});
|
|
40
|
-
return ranges;
|
|
41
|
-
};
|
|
42
|
-
var getSourceSyncBlockRange = function getSourceSyncBlockRange(doc, pos) {
|
|
43
|
-
var resolvedPos = doc.resolve(Math.max(0, Math.min(pos, doc.content.size)));
|
|
44
|
-
for (var depth = resolvedPos.depth; depth > 0; depth--) {
|
|
45
|
-
var node = resolvedPos.node(depth);
|
|
46
|
-
if (nodeTypesWithSyncBlockPlaceholderText.includes(node.type.name)) {
|
|
47
|
-
return {
|
|
48
|
-
from: resolvedPos.before(depth),
|
|
49
|
-
to: resolvedPos.after(depth)
|
|
50
|
-
};
|
|
51
|
-
}
|
|
52
|
-
}
|
|
53
|
-
return;
|
|
54
|
-
};
|
|
55
|
-
var getAffectedSourceSyncBlockRanges = function getAffectedSourceSyncBlockRanges(doc, ranges) {
|
|
56
|
-
var affectedRanges = new Map();
|
|
57
|
-
ranges.forEach(function (_ref) {
|
|
58
|
-
var from = _ref.from,
|
|
59
|
-
to = _ref.to;
|
|
60
|
-
[from, to].forEach(function (pos) {
|
|
61
|
-
var sourceSyncBlockRange = getSourceSyncBlockRange(doc, pos);
|
|
62
|
-
if (sourceSyncBlockRange) {
|
|
63
|
-
affectedRanges.set("".concat(sourceSyncBlockRange.from, "-").concat(sourceSyncBlockRange.to), sourceSyncBlockRange);
|
|
64
|
-
}
|
|
65
|
-
});
|
|
66
|
-
doc.nodesBetween(from, to, function (node, pos) {
|
|
67
|
-
if (nodeTypesWithSyncBlockPlaceholderText.includes(node.type.name)) {
|
|
68
|
-
var sourceSyncBlockRange = {
|
|
69
|
-
from: pos,
|
|
70
|
-
to: pos + node.nodeSize
|
|
71
|
-
};
|
|
72
|
-
affectedRanges.set("".concat(sourceSyncBlockRange.from, "-").concat(sourceSyncBlockRange.to), sourceSyncBlockRange);
|
|
73
|
-
return false;
|
|
74
|
-
}
|
|
75
|
-
return true;
|
|
76
|
-
});
|
|
77
|
-
});
|
|
78
|
-
return Array.from(affectedRanges.values());
|
|
79
|
-
};
|
|
80
|
-
export function createSourceSyncBlockPlaceholderDecorations(editorState, intl) {
|
|
81
|
-
if (!isSourceSyncBlockPlaceholderEnabled()) {
|
|
82
|
-
return;
|
|
83
|
-
}
|
|
84
|
-
var decorations = [];
|
|
85
|
-
editorState.doc.descendants(function (node, pos) {
|
|
86
|
-
if (isEmptySourceSyncBlock(node)) {
|
|
87
|
-
decorations.push(createSourceSyncBlockPlaceholderDecoration(pos, intl));
|
|
88
|
-
return false;
|
|
89
|
-
}
|
|
90
|
-
return true;
|
|
91
|
-
});
|
|
92
|
-
return decorations.length > 0 ? DecorationSet.create(editorState.doc, decorations) : DecorationSet.empty;
|
|
93
|
-
}
|
|
94
|
-
export function updateSourceSyncBlockPlaceholderDecorations(_ref2) {
|
|
95
|
-
var currentDecorationSet = _ref2.currentDecorationSet,
|
|
96
|
-
intl = _ref2.intl,
|
|
97
|
-
newEditorState = _ref2.newEditorState,
|
|
98
|
-
oldEditorState = _ref2.oldEditorState,
|
|
99
|
-
tr = _ref2.tr;
|
|
100
|
-
if (!isSourceSyncBlockPlaceholderEnabled()) {
|
|
101
|
-
return;
|
|
102
|
-
}
|
|
103
|
-
if (!currentDecorationSet) {
|
|
104
|
-
return createSourceSyncBlockPlaceholderDecorations(newEditorState, intl);
|
|
105
|
-
}
|
|
106
|
-
if (!tr.docChanged) {
|
|
107
|
-
return tr.mapping.maps.length > 0 ? currentDecorationSet.map(tr.mapping, newEditorState.doc) : currentDecorationSet;
|
|
108
|
-
}
|
|
109
|
-
var mappedDecorationSet = currentDecorationSet.map(tr.mapping, newEditorState.doc);
|
|
110
|
-
var affectedRanges = getAffectedSourceSyncBlockRanges(newEditorState.doc, getChangedRanges(tr));
|
|
111
|
-
if (affectedRanges.length === 0) {
|
|
112
|
-
return mappedDecorationSet;
|
|
113
|
-
}
|
|
114
|
-
var decorationsToRemove = affectedRanges.flatMap(function (_ref3) {
|
|
115
|
-
var from = _ref3.from,
|
|
116
|
-
to = _ref3.to;
|
|
117
|
-
return mappedDecorationSet.find(from, to);
|
|
118
|
-
});
|
|
119
|
-
var decorationsToAdd = affectedRanges.flatMap(function (_ref4) {
|
|
120
|
-
var from = _ref4.from;
|
|
121
|
-
var node = newEditorState.doc.nodeAt(from);
|
|
122
|
-
return node && isEmptySourceSyncBlock(node) ? [createSourceSyncBlockPlaceholderDecoration(from, intl)] : [];
|
|
123
|
-
});
|
|
124
|
-
return mappedDecorationSet.remove(decorationsToRemove).add(newEditorState.doc, decorationsToAdd);
|
|
125
|
-
}
|
|
@@ -1,17 +0,0 @@
|
|
|
1
|
-
import type { IntlShape } from 'react-intl';
|
|
2
|
-
import type { EditorState } from '@atlaskit/editor-prosemirror/state';
|
|
3
|
-
import type { Mapping } from '@atlaskit/editor-prosemirror/transform';
|
|
4
|
-
import { DecorationSet } from '@atlaskit/editor-prosemirror/view';
|
|
5
|
-
type SourceSyncBlockPlaceholderTransaction = {
|
|
6
|
-
mapping: Mapping;
|
|
7
|
-
docChanged: boolean;
|
|
8
|
-
};
|
|
9
|
-
export declare function createSourceSyncBlockPlaceholderDecorations(editorState: EditorState, intl: IntlShape): DecorationSet | undefined;
|
|
10
|
-
export declare function updateSourceSyncBlockPlaceholderDecorations({ currentDecorationSet, intl, newEditorState, oldEditorState, tr, }: {
|
|
11
|
-
currentDecorationSet?: DecorationSet;
|
|
12
|
-
intl: IntlShape;
|
|
13
|
-
newEditorState: EditorState;
|
|
14
|
-
oldEditorState: EditorState;
|
|
15
|
-
tr: SourceSyncBlockPlaceholderTransaction;
|
|
16
|
-
}): DecorationSet | undefined;
|
|
17
|
-
export {};
|