@atlaskit/editor-plugin-placeholder 6.2.0 → 6.3.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +11 -0
- package/dist/cjs/placeholderPlugin.js +209 -53
- package/dist/es2019/placeholderPlugin.js +181 -23
- package/dist/esm/placeholderPlugin.js +209 -54
- package/dist/types/placeholderPlugin.d.ts +2 -1
- package/dist/types/placeholderPluginType.d.ts +1 -0
- package/dist/types-ts4.5/placeholderPlugin.d.ts +2 -1
- package/dist/types-ts4.5/placeholderPluginType.d.ts +1 -0
- package/package.json +6 -3
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,16 @@
|
|
|
1
1
|
# @atlaskit/editor-plugin-placeholder
|
|
2
2
|
|
|
3
|
+
## 6.3.0
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- [`673772ec67daf`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/673772ec67daf) -
|
|
8
|
+
[ux] EDITOR-2265 - show placeholder for empty paragraph
|
|
9
|
+
|
|
10
|
+
### Patch Changes
|
|
11
|
+
|
|
12
|
+
- Updated dependencies
|
|
13
|
+
|
|
3
14
|
## 6.2.0
|
|
4
15
|
|
|
5
16
|
### Minor Changes
|
|
@@ -4,6 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
|
|
|
4
4
|
Object.defineProperty(exports, "__esModule", {
|
|
5
5
|
value: true
|
|
6
6
|
});
|
|
7
|
+
exports.EMPTY_PARAGRAPH_TIMEOUT_DELAY = void 0;
|
|
7
8
|
exports.createPlaceholderDecoration = createPlaceholderDecoration;
|
|
8
9
|
exports.createPlugin = createPlugin;
|
|
9
10
|
exports.pluginKey = exports.placeholderPlugin = void 0;
|
|
@@ -26,6 +27,8 @@ var TYPEWRITER_ERASE_DELAY = 40; // Delay between erasing each character
|
|
|
26
27
|
var TYPEWRITER_CYCLE_DELAY = 500; // Delay before starting next cycle
|
|
27
28
|
var TYPEWRITER_TYPED_AND_DELETED_DELAY = 1500; // Delay before starting animation after user typed and deleted
|
|
28
29
|
|
|
30
|
+
var EMPTY_PARAGRAPH_TIMEOUT_DELAY = exports.EMPTY_PARAGRAPH_TIMEOUT_DELAY = 2000; // Delay before showing placeholder on empty paragraph
|
|
31
|
+
|
|
29
32
|
var pluginKey = exports.pluginKey = new _state.PluginKey('placeholderPlugin');
|
|
30
33
|
var placeholderTestId = 'placeholder-test-id';
|
|
31
34
|
function getPlaceholderState(editorState) {
|
|
@@ -129,62 +132,131 @@ function createPlaceholderDecoration(editorState, placeholderText, placeholderPr
|
|
|
129
132
|
key: "placeholder ".concat(placeholderText)
|
|
130
133
|
})]);
|
|
131
134
|
}
|
|
132
|
-
function setPlaceHolderState(
|
|
135
|
+
function setPlaceHolderState(_ref) {
|
|
136
|
+
var placeholderText = _ref.placeholderText,
|
|
137
|
+
pos = _ref.pos,
|
|
138
|
+
placeholderPrompts = _ref.placeholderPrompts,
|
|
139
|
+
typedAndDeleted = _ref.typedAndDeleted,
|
|
140
|
+
userHadTyped = _ref.userHadTyped,
|
|
141
|
+
canShowOnEmptyParagraph = _ref.canShowOnEmptyParagraph,
|
|
142
|
+
showOnEmptyParagraph = _ref.showOnEmptyParagraph;
|
|
133
143
|
return {
|
|
134
144
|
hasPlaceholder: true,
|
|
135
145
|
placeholderText: placeholderText,
|
|
136
146
|
placeholderPrompts: placeholderPrompts,
|
|
137
147
|
pos: pos ? pos : 1,
|
|
138
148
|
typedAndDeleted: typedAndDeleted,
|
|
139
|
-
userHadTyped: userHadTyped
|
|
149
|
+
userHadTyped: userHadTyped,
|
|
150
|
+
canShowOnEmptyParagraph: canShowOnEmptyParagraph,
|
|
151
|
+
showOnEmptyParagraph: showOnEmptyParagraph
|
|
140
152
|
};
|
|
141
153
|
}
|
|
142
|
-
var emptyPlaceholder = function emptyPlaceholder(
|
|
154
|
+
var emptyPlaceholder = function emptyPlaceholder(_ref2) {
|
|
155
|
+
var placeholderText = _ref2.placeholderText,
|
|
156
|
+
placeholderPrompts = _ref2.placeholderPrompts,
|
|
157
|
+
userHadTyped = _ref2.userHadTyped,
|
|
158
|
+
pos = _ref2.pos,
|
|
159
|
+
canShowOnEmptyParagraph = _ref2.canShowOnEmptyParagraph,
|
|
160
|
+
showOnEmptyParagraph = _ref2.showOnEmptyParagraph;
|
|
143
161
|
return {
|
|
144
162
|
hasPlaceholder: false,
|
|
145
163
|
placeholderText: placeholderText,
|
|
146
164
|
placeholderPrompts: placeholderPrompts,
|
|
147
165
|
userHadTyped: userHadTyped,
|
|
148
|
-
typedAndDeleted: false
|
|
166
|
+
typedAndDeleted: false,
|
|
167
|
+
canShowOnEmptyParagraph: canShowOnEmptyParagraph,
|
|
168
|
+
showOnEmptyParagraph: showOnEmptyParagraph,
|
|
169
|
+
pos: pos
|
|
149
170
|
};
|
|
150
171
|
};
|
|
151
|
-
function createPlaceHolderStateFrom(
|
|
152
|
-
var
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
172
|
+
function createPlaceHolderStateFrom(_ref3) {
|
|
173
|
+
var isInitial = _ref3.isInitial,
|
|
174
|
+
isEditorFocused = _ref3.isEditorFocused,
|
|
175
|
+
editorState = _ref3.editorState,
|
|
176
|
+
isTypeAheadOpen = _ref3.isTypeAheadOpen,
|
|
177
|
+
defaultPlaceholderText = _ref3.defaultPlaceholderText,
|
|
178
|
+
intl = _ref3.intl,
|
|
179
|
+
bracketPlaceholderText = _ref3.bracketPlaceholderText,
|
|
180
|
+
emptyLinePlaceholder = _ref3.emptyLinePlaceholder,
|
|
181
|
+
placeholderPrompts = _ref3.placeholderPrompts,
|
|
182
|
+
typedAndDeleted = _ref3.typedAndDeleted,
|
|
183
|
+
userHadTyped = _ref3.userHadTyped,
|
|
184
|
+
isPlaceholderHidden = _ref3.isPlaceholderHidden,
|
|
185
|
+
withEmptyParagraph = _ref3.withEmptyParagraph,
|
|
186
|
+
showOnEmptyParagraph = _ref3.showOnEmptyParagraph;
|
|
163
187
|
if (isPlaceholderHidden && (0, _platformFeatureFlags.fg)('platform_editor_ai_aifc_patch_beta')) {
|
|
164
|
-
return _objectSpread(_objectSpread({}, emptyPlaceholder(
|
|
188
|
+
return _objectSpread(_objectSpread({}, emptyPlaceholder({
|
|
189
|
+
placeholderText: defaultPlaceholderText,
|
|
190
|
+
placeholderPrompts: placeholderPrompts,
|
|
191
|
+
userHadTyped: userHadTyped
|
|
192
|
+
})), {}, {
|
|
165
193
|
isPlaceholderHidden: isPlaceholderHidden
|
|
166
194
|
});
|
|
167
195
|
}
|
|
168
196
|
if (isTypeAheadOpen !== null && isTypeAheadOpen !== void 0 && isTypeAheadOpen(editorState)) {
|
|
169
|
-
return emptyPlaceholder(
|
|
197
|
+
return emptyPlaceholder({
|
|
198
|
+
placeholderText: defaultPlaceholderText,
|
|
199
|
+
placeholderPrompts: placeholderPrompts,
|
|
200
|
+
userHadTyped: userHadTyped
|
|
201
|
+
});
|
|
170
202
|
}
|
|
171
203
|
if ((defaultPlaceholderText || placeholderPrompts) && (0, _utils.isEmptyDocument)(editorState.doc)) {
|
|
172
|
-
return setPlaceHolderState(
|
|
204
|
+
return setPlaceHolderState({
|
|
205
|
+
placeholderText: defaultPlaceholderText,
|
|
206
|
+
pos: 1,
|
|
207
|
+
placeholderPrompts: placeholderPrompts,
|
|
208
|
+
typedAndDeleted: typedAndDeleted,
|
|
209
|
+
userHadTyped: userHadTyped
|
|
210
|
+
});
|
|
173
211
|
}
|
|
174
|
-
if (
|
|
175
|
-
var _parentNode$firstChil, _parentNode$firstChil2;
|
|
212
|
+
if ((0, _platformFeatureFlags.fg)('platform_editor_ai_aifc_patch_beta_2')) {
|
|
176
213
|
var _editorState$selectio = editorState.selection,
|
|
177
|
-
|
|
214
|
+
from = _editorState$selectio.from,
|
|
215
|
+
to = _editorState$selectio.to,
|
|
178
216
|
$to = _editorState$selectio.$to;
|
|
179
|
-
if (
|
|
180
|
-
return
|
|
217
|
+
if (defaultPlaceholderText && withEmptyParagraph && isEditorFocused && !isInitial && !(0, _utils.isEmptyDocument)(editorState.doc) && from === to && (0, _utils.isEmptyParagraph)($to.parent) && (0, _utils.hasDocAsParent)($to)) {
|
|
218
|
+
return showOnEmptyParagraph ? setPlaceHolderState({
|
|
219
|
+
placeholderText: defaultPlaceholderText,
|
|
220
|
+
pos: to,
|
|
221
|
+
placeholderPrompts: placeholderPrompts,
|
|
222
|
+
typedAndDeleted: typedAndDeleted,
|
|
223
|
+
userHadTyped: userHadTyped,
|
|
224
|
+
canShowOnEmptyParagraph: true,
|
|
225
|
+
showOnEmptyParagraph: true
|
|
226
|
+
}) : emptyPlaceholder({
|
|
227
|
+
placeholderText: defaultPlaceholderText,
|
|
228
|
+
placeholderPrompts: placeholderPrompts,
|
|
229
|
+
userHadTyped: userHadTyped,
|
|
230
|
+
canShowOnEmptyParagraph: true,
|
|
231
|
+
showOnEmptyParagraph: false,
|
|
232
|
+
pos: to
|
|
233
|
+
});
|
|
234
|
+
}
|
|
235
|
+
}
|
|
236
|
+
if (isEditorFocused && (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1')) {
|
|
237
|
+
var _parentNode$firstChil, _parentNode$firstChil2;
|
|
238
|
+
var _editorState$selectio2 = editorState.selection,
|
|
239
|
+
$from = _editorState$selectio2.$from,
|
|
240
|
+
_$to = _editorState$selectio2.$to;
|
|
241
|
+
if ($from.pos !== _$to.pos) {
|
|
242
|
+
return emptyPlaceholder({
|
|
243
|
+
placeholderText: defaultPlaceholderText,
|
|
244
|
+
placeholderPrompts: placeholderPrompts,
|
|
245
|
+
userHadTyped: userHadTyped
|
|
246
|
+
});
|
|
181
247
|
}
|
|
182
248
|
var parentNode = $from.node($from.depth - 1);
|
|
183
249
|
var parentType = parentNode === null || parentNode === void 0 ? void 0 : parentNode.type.name;
|
|
184
250
|
if (emptyLinePlaceholder && parentType === 'doc') {
|
|
185
251
|
var isEmptyLine = (0, _utils.isEmptyParagraph)($from.parent);
|
|
186
252
|
if (isEmptyLine) {
|
|
187
|
-
return setPlaceHolderState(
|
|
253
|
+
return setPlaceHolderState({
|
|
254
|
+
placeholderText: emptyLinePlaceholder,
|
|
255
|
+
pos: $from.pos,
|
|
256
|
+
placeholderPrompts: placeholderPrompts,
|
|
257
|
+
typedAndDeleted: typedAndDeleted,
|
|
258
|
+
userHadTyped: userHadTyped
|
|
259
|
+
});
|
|
188
260
|
}
|
|
189
261
|
}
|
|
190
262
|
var isEmptyNode = (parentNode === null || parentNode === void 0 ? void 0 : parentNode.childCount) === 1 && ((_parentNode$firstChil = parentNode.firstChild) === null || _parentNode$firstChil === void 0 ? void 0 : _parentNode$firstChil.content.size) === 0 && ((_parentNode$firstChil2 = parentNode.firstChild) === null || _parentNode$firstChil2 === void 0 ? void 0 : _parentNode$firstChil2.type.name) === 'paragraph';
|
|
@@ -194,33 +266,69 @@ function createPlaceHolderStateFrom(_ref) {
|
|
|
194
266
|
return node.type === editorState.schema.nodes.table;
|
|
195
267
|
})(editorState.selection);
|
|
196
268
|
if (!table) {
|
|
197
|
-
return emptyPlaceholder(
|
|
269
|
+
return emptyPlaceholder({
|
|
270
|
+
placeholderText: defaultPlaceholderText,
|
|
271
|
+
placeholderPrompts: placeholderPrompts,
|
|
272
|
+
userHadTyped: userHadTyped
|
|
273
|
+
});
|
|
198
274
|
}
|
|
199
275
|
var isFirstCell = (table === null || table === void 0 || (_table$node$firstChil = table.node.firstChild) === null || _table$node$firstChil === void 0 ? void 0 : _table$node$firstChil.content.firstChild) === parentNode;
|
|
200
276
|
if (isFirstCell) {
|
|
201
|
-
return setPlaceHolderState(
|
|
277
|
+
return setPlaceHolderState({
|
|
278
|
+
placeholderText: intl.formatMessage(_messages.placeholderTextMessages.shortEmptyNodePlaceholderText),
|
|
279
|
+
pos: $from.pos,
|
|
280
|
+
placeholderPrompts: placeholderPrompts,
|
|
281
|
+
typedAndDeleted: typedAndDeleted,
|
|
282
|
+
userHadTyped: userHadTyped
|
|
283
|
+
});
|
|
202
284
|
}
|
|
203
285
|
}
|
|
204
286
|
if (nodeTypesWithLongPlaceholderText.includes(parentType) && isEmptyNode) {
|
|
205
|
-
return setPlaceHolderState(
|
|
287
|
+
return setPlaceHolderState({
|
|
288
|
+
placeholderText: intl.formatMessage(_messages.placeholderTextMessages.longEmptyNodePlaceholderText),
|
|
289
|
+
pos: $from.pos,
|
|
290
|
+
placeholderPrompts: placeholderPrompts,
|
|
291
|
+
typedAndDeleted: typedAndDeleted,
|
|
292
|
+
userHadTyped: userHadTyped
|
|
293
|
+
});
|
|
206
294
|
}
|
|
207
295
|
if (nodeTypesWithSyncBlockPlaceholderText.includes(parentType) && isEmptyNode && (0, _expValEquals.expValEquals)('platform_synced_block', 'isEnabled', true)) {
|
|
208
|
-
return setPlaceHolderState(
|
|
296
|
+
return setPlaceHolderState({
|
|
297
|
+
placeholderText: intl.formatMessage(_messages.placeholderTextMessages.syncBlockPlaceholderText),
|
|
298
|
+
pos: $from.pos,
|
|
299
|
+
placeholderPrompts: placeholderPrompts,
|
|
300
|
+
typedAndDeleted: typedAndDeleted,
|
|
301
|
+
userHadTyped: userHadTyped
|
|
302
|
+
});
|
|
209
303
|
}
|
|
210
|
-
return emptyPlaceholder(
|
|
304
|
+
return emptyPlaceholder({
|
|
305
|
+
placeholderText: defaultPlaceholderText,
|
|
306
|
+
placeholderPrompts: placeholderPrompts,
|
|
307
|
+
userHadTyped: userHadTyped
|
|
308
|
+
});
|
|
211
309
|
}
|
|
212
310
|
if (bracketPlaceholderText && (0, _utils.bracketTyped)(editorState) && isEditorFocused) {
|
|
213
311
|
var _$from = editorState.selection.$from;
|
|
214
312
|
// Space is to account for positioning of the bracket
|
|
215
313
|
var bracketHint = ' ' + bracketPlaceholderText;
|
|
216
|
-
return setPlaceHolderState(
|
|
314
|
+
return setPlaceHolderState({
|
|
315
|
+
placeholderText: bracketHint,
|
|
316
|
+
pos: _$from.pos - 1,
|
|
317
|
+
placeholderPrompts: placeholderPrompts,
|
|
318
|
+
typedAndDeleted: typedAndDeleted,
|
|
319
|
+
userHadTyped: userHadTyped
|
|
320
|
+
});
|
|
217
321
|
}
|
|
218
|
-
return emptyPlaceholder(
|
|
322
|
+
return emptyPlaceholder({
|
|
323
|
+
placeholderText: defaultPlaceholderText,
|
|
324
|
+
placeholderPrompts: placeholderPrompts,
|
|
325
|
+
userHadTyped: userHadTyped
|
|
326
|
+
});
|
|
219
327
|
}
|
|
220
|
-
function calculateUserInteractionState(
|
|
221
|
-
var placeholderState =
|
|
222
|
-
oldEditorState =
|
|
223
|
-
newEditorState =
|
|
328
|
+
function calculateUserInteractionState(_ref4) {
|
|
329
|
+
var placeholderState = _ref4.placeholderState,
|
|
330
|
+
oldEditorState = _ref4.oldEditorState,
|
|
331
|
+
newEditorState = _ref4.newEditorState;
|
|
224
332
|
var wasEmpty = oldEditorState ? (0, _utils.isEmptyDocument)(oldEditorState.doc) : true;
|
|
225
333
|
var isEmpty = (0, _utils.isEmptyDocument)(newEditorState.doc);
|
|
226
334
|
var hasEverTyped = Boolean(placeholderState === null || placeholderState === void 0 ? void 0 : placeholderState.userHadTyped) ||
|
|
@@ -237,7 +345,7 @@ function calculateUserInteractionState(_ref2) {
|
|
|
237
345
|
typedAndDeleted: isInTypedAndDeletedState
|
|
238
346
|
};
|
|
239
347
|
}
|
|
240
|
-
function createPlugin(intl, defaultPlaceholderText, bracketPlaceholderText, emptyLinePlaceholder, placeholderPrompts, api) {
|
|
348
|
+
function createPlugin(intl, defaultPlaceholderText, bracketPlaceholderText, emptyLinePlaceholder, placeholderPrompts, withEmptyParagraph, api) {
|
|
241
349
|
if (!defaultPlaceholderText && !placeholderPrompts && !bracketPlaceholderText) {
|
|
242
350
|
return;
|
|
243
351
|
}
|
|
@@ -255,6 +363,7 @@ function createPlugin(intl, defaultPlaceholderText, bracketPlaceholderText, empt
|
|
|
255
363
|
init: function init(_, state) {
|
|
256
364
|
var _api$focus, _api$typeAhead;
|
|
257
365
|
return createPlaceHolderStateFrom({
|
|
366
|
+
isInitial: true,
|
|
258
367
|
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),
|
|
259
368
|
editorState: state,
|
|
260
369
|
isTypeAheadOpen: api === null || api === void 0 || (_api$typeAhead = api.typeAhead) === null || _api$typeAhead === void 0 ? void 0 : _api$typeAhead.actions.isOpen,
|
|
@@ -268,7 +377,7 @@ function createPlugin(intl, defaultPlaceholderText, bracketPlaceholderText, empt
|
|
|
268
377
|
});
|
|
269
378
|
},
|
|
270
379
|
apply: function apply(tr, placeholderState, _oldEditorState, newEditorState) {
|
|
271
|
-
var _api$focus2, _placeholderState$isP, _api$typeAhead2,
|
|
380
|
+
var _api$focus2, _placeholderState$isP, _api$typeAhead2, _ref5, _meta$placeholderText, _ref6, _meta$placeholderProm, _meta$showOnEmptyPara;
|
|
272
381
|
var meta = tr.getMeta(pluginKey);
|
|
273
382
|
var isEditorFocused = Boolean(api === null || api === void 0 || (_api$focus2 = api.focus) === null || _api$focus2 === void 0 || (_api$focus2 = _api$focus2.sharedState.currentState()) === null || _api$focus2 === void 0 ? void 0 : _api$focus2.hasFocus);
|
|
274
383
|
var _calculateUserInterac = calculateUserInteractionState({
|
|
@@ -282,18 +391,23 @@ function createPlugin(intl, defaultPlaceholderText, bracketPlaceholderText, empt
|
|
|
282
391
|
if ((meta === null || meta === void 0 ? void 0 : meta.isPlaceholderHidden) !== undefined && (0, _platformFeatureFlags.fg)('platform_editor_ai_aifc_patch_beta')) {
|
|
283
392
|
isPlaceholderHidden = meta.isPlaceholderHidden;
|
|
284
393
|
}
|
|
394
|
+
if ((meta === null || meta === void 0 ? void 0 : meta.placeholderText) !== undefined && (0, _platformFeatureFlags.fg)('platform_editor_ai_aifc_patch_beta_2')) {
|
|
395
|
+
defaultPlaceholderText = meta.placeholderText;
|
|
396
|
+
}
|
|
285
397
|
var newPlaceholderState = createPlaceHolderStateFrom({
|
|
286
398
|
isEditorFocused: isEditorFocused,
|
|
287
399
|
editorState: newEditorState,
|
|
288
400
|
isTypeAheadOpen: api === null || api === void 0 || (_api$typeAhead2 = api.typeAhead) === null || _api$typeAhead2 === void 0 ? void 0 : _api$typeAhead2.actions.isOpen,
|
|
289
|
-
defaultPlaceholderText: (
|
|
401
|
+
defaultPlaceholderText: (0, _platformFeatureFlags.fg)('platform_editor_ai_aifc_patch_beta_2') ? defaultPlaceholderText : (_ref5 = (_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 && _ref5 !== void 0 ? _ref5 : defaultPlaceholderText,
|
|
290
402
|
bracketPlaceholderText: bracketPlaceholderText,
|
|
291
403
|
emptyLinePlaceholder: emptyLinePlaceholder,
|
|
292
|
-
placeholderPrompts: (
|
|
404
|
+
placeholderPrompts: (_ref6 = (_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 && _ref6 !== void 0 ? _ref6 : placeholderPrompts,
|
|
293
405
|
typedAndDeleted: typedAndDeleted,
|
|
294
406
|
userHadTyped: userHadTyped,
|
|
295
407
|
intl: intl,
|
|
296
|
-
isPlaceholderHidden: isPlaceholderHidden
|
|
408
|
+
isPlaceholderHidden: isPlaceholderHidden,
|
|
409
|
+
withEmptyParagraph: withEmptyParagraph,
|
|
410
|
+
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
|
|
297
411
|
});
|
|
298
412
|
|
|
299
413
|
// Clear timeouts when hasPlaceholder becomes false
|
|
@@ -327,25 +441,67 @@ function createPlugin(intl, defaultPlaceholderText, bracketPlaceholderText, empt
|
|
|
327
441
|
}
|
|
328
442
|
},
|
|
329
443
|
view: function view() {
|
|
444
|
+
var timeoutId;
|
|
445
|
+
function startEmptyParagraphTimeout(editorView) {
|
|
446
|
+
if (timeoutId) {
|
|
447
|
+
return;
|
|
448
|
+
}
|
|
449
|
+
timeoutId = setTimeout(function () {
|
|
450
|
+
timeoutId = undefined;
|
|
451
|
+
editorView.dispatch(editorView.state.tr.setMeta(pluginKey, {
|
|
452
|
+
showOnEmptyParagraph: true
|
|
453
|
+
}));
|
|
454
|
+
}, EMPTY_PARAGRAPH_TIMEOUT_DELAY);
|
|
455
|
+
}
|
|
456
|
+
function destroyEmptyParagraphTimeout() {
|
|
457
|
+
if (timeoutId) {
|
|
458
|
+
clearTimeout(timeoutId);
|
|
459
|
+
timeoutId = undefined;
|
|
460
|
+
}
|
|
461
|
+
}
|
|
330
462
|
return {
|
|
463
|
+
update: function update(editorView, prevState) {
|
|
464
|
+
if ((0, _platformFeatureFlags.fg)('platform_editor_ai_aifc_patch_beta_2')) {
|
|
465
|
+
var prevPluginState = getPlaceholderState(prevState);
|
|
466
|
+
var newPluginState = getPlaceholderState(editorView.state);
|
|
467
|
+
|
|
468
|
+
// user start typing after move to an empty paragraph, clear timeout
|
|
469
|
+
if (!newPluginState.canShowOnEmptyParagraph && timeoutId) {
|
|
470
|
+
destroyEmptyParagraphTimeout();
|
|
471
|
+
}
|
|
472
|
+
// user move to an empty paragraph again, reset state to hide placeholder, and restart timeout
|
|
473
|
+
else if (prevPluginState.canShowOnEmptyParagraph && newPluginState.canShowOnEmptyParagraph && newPluginState.pos !== prevPluginState.pos) {
|
|
474
|
+
editorView.dispatch(editorView.state.tr.setMeta(pluginKey, {
|
|
475
|
+
showOnEmptyParagraph: false
|
|
476
|
+
}));
|
|
477
|
+
destroyEmptyParagraphTimeout();
|
|
478
|
+
startEmptyParagraphTimeout(editorView);
|
|
479
|
+
}
|
|
480
|
+
// user move to an empty paragraph (by click enter or move to an empty paragraph), start timeout
|
|
481
|
+
else if (!prevPluginState.canShowOnEmptyParagraph && newPluginState.canShowOnEmptyParagraph && !newPluginState.showOnEmptyParagraph && !timeoutId) {
|
|
482
|
+
startEmptyParagraphTimeout(editorView);
|
|
483
|
+
}
|
|
484
|
+
}
|
|
485
|
+
},
|
|
331
486
|
destroy: function destroy() {
|
|
332
487
|
clearAllTypewriterTimeouts();
|
|
488
|
+
destroyEmptyParagraphTimeout();
|
|
333
489
|
isDestroyed = true;
|
|
334
490
|
}
|
|
335
491
|
};
|
|
336
492
|
}
|
|
337
493
|
});
|
|
338
494
|
}
|
|
339
|
-
var placeholderPlugin = exports.placeholderPlugin = function placeholderPlugin(
|
|
340
|
-
var options =
|
|
341
|
-
api =
|
|
495
|
+
var placeholderPlugin = exports.placeholderPlugin = function placeholderPlugin(_ref7) {
|
|
496
|
+
var options = _ref7.config,
|
|
497
|
+
api = _ref7.api;
|
|
342
498
|
var currentPlaceholder = options === null || options === void 0 ? void 0 : options.placeholder;
|
|
343
499
|
return {
|
|
344
500
|
name: 'placeholder',
|
|
345
501
|
commands: {
|
|
346
502
|
setPlaceholder: function setPlaceholder(placeholderText) {
|
|
347
|
-
return function (
|
|
348
|
-
var tr =
|
|
503
|
+
return function (_ref8) {
|
|
504
|
+
var tr = _ref8.tr;
|
|
349
505
|
if (currentPlaceholder !== placeholderText) {
|
|
350
506
|
currentPlaceholder = placeholderText;
|
|
351
507
|
return tr.setMeta(pluginKey, {
|
|
@@ -356,16 +512,16 @@ var placeholderPlugin = exports.placeholderPlugin = function placeholderPlugin(_
|
|
|
356
512
|
};
|
|
357
513
|
},
|
|
358
514
|
setAnimatingPlaceholderPrompts: function setAnimatingPlaceholderPrompts(placeholderPrompts) {
|
|
359
|
-
return function (
|
|
360
|
-
var tr =
|
|
515
|
+
return function (_ref9) {
|
|
516
|
+
var tr = _ref9.tr;
|
|
361
517
|
return tr.setMeta(pluginKey, {
|
|
362
518
|
placeholderPrompts: placeholderPrompts
|
|
363
519
|
});
|
|
364
520
|
};
|
|
365
521
|
},
|
|
366
522
|
setPlaceholderHidden: function setPlaceholderHidden(isPlaceholderHidden) {
|
|
367
|
-
return function (
|
|
368
|
-
var tr =
|
|
523
|
+
return function (_ref0) {
|
|
524
|
+
var tr = _ref0.tr;
|
|
369
525
|
return tr.setMeta(pluginKey, {
|
|
370
526
|
isPlaceholderHidden: isPlaceholderHidden
|
|
371
527
|
});
|
|
@@ -375,9 +531,9 @@ var placeholderPlugin = exports.placeholderPlugin = function placeholderPlugin(_
|
|
|
375
531
|
pmPlugins: function pmPlugins() {
|
|
376
532
|
return [{
|
|
377
533
|
name: 'placeholder',
|
|
378
|
-
plugin: function plugin(
|
|
379
|
-
var getIntl =
|
|
380
|
-
return createPlugin(getIntl(), options && options.placeholder, options && options.placeholderBracketHint, options && options.emptyLinePlaceholder, options && options.placeholderPrompts, api);
|
|
534
|
+
plugin: function plugin(_ref1) {
|
|
535
|
+
var getIntl = _ref1.getIntl;
|
|
536
|
+
return createPlugin(getIntl(), options && options.placeholder, options && options.placeholderBracketHint, options && options.emptyLinePlaceholder, options && options.placeholderPrompts, options === null || options === void 0 ? void 0 : options.withEmptyParagraph, api);
|
|
381
537
|
}
|
|
382
538
|
}];
|
|
383
539
|
}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { placeholderTextMessages as messages } from '@atlaskit/editor-common/messages';
|
|
2
2
|
import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
|
|
3
|
-
import { bracketTyped, browser, isEmptyDocument, isEmptyParagraph } from '@atlaskit/editor-common/utils';
|
|
3
|
+
import { bracketTyped, browser, hasDocAsParent, isEmptyDocument, isEmptyParagraph } from '@atlaskit/editor-common/utils';
|
|
4
4
|
import { PluginKey } from '@atlaskit/editor-prosemirror/state';
|
|
5
5
|
import { findParentNode } from '@atlaskit/editor-prosemirror/utils';
|
|
6
6
|
import { Decoration, DecorationSet } from '@atlaskit/editor-prosemirror/view';
|
|
@@ -14,6 +14,8 @@ const TYPEWRITER_ERASE_DELAY = 40; // Delay between erasing each character
|
|
|
14
14
|
const TYPEWRITER_CYCLE_DELAY = 500; // Delay before starting next cycle
|
|
15
15
|
const TYPEWRITER_TYPED_AND_DELETED_DELAY = 1500; // Delay before starting animation after user typed and deleted
|
|
16
16
|
|
|
17
|
+
export const EMPTY_PARAGRAPH_TIMEOUT_DELAY = 2000; // Delay before showing placeholder on empty paragraph
|
|
18
|
+
|
|
17
19
|
export const pluginKey = new PluginKey('placeholderPlugin');
|
|
18
20
|
const placeholderTestId = 'placeholder-test-id';
|
|
19
21
|
function getPlaceholderState(editorState) {
|
|
@@ -112,24 +114,45 @@ export function createPlaceholderDecoration(editorState, placeholderText, placeh
|
|
|
112
114
|
key: `placeholder ${placeholderText}`
|
|
113
115
|
})]);
|
|
114
116
|
}
|
|
115
|
-
function setPlaceHolderState(
|
|
117
|
+
function setPlaceHolderState({
|
|
118
|
+
placeholderText,
|
|
119
|
+
pos,
|
|
120
|
+
placeholderPrompts,
|
|
121
|
+
typedAndDeleted,
|
|
122
|
+
userHadTyped,
|
|
123
|
+
canShowOnEmptyParagraph,
|
|
124
|
+
showOnEmptyParagraph
|
|
125
|
+
}) {
|
|
116
126
|
return {
|
|
117
127
|
hasPlaceholder: true,
|
|
118
128
|
placeholderText,
|
|
119
129
|
placeholderPrompts,
|
|
120
130
|
pos: pos ? pos : 1,
|
|
121
131
|
typedAndDeleted,
|
|
122
|
-
userHadTyped
|
|
132
|
+
userHadTyped,
|
|
133
|
+
canShowOnEmptyParagraph,
|
|
134
|
+
showOnEmptyParagraph
|
|
123
135
|
};
|
|
124
136
|
}
|
|
125
|
-
const emptyPlaceholder = (
|
|
137
|
+
const emptyPlaceholder = ({
|
|
138
|
+
placeholderText,
|
|
139
|
+
placeholderPrompts,
|
|
140
|
+
userHadTyped,
|
|
141
|
+
pos,
|
|
142
|
+
canShowOnEmptyParagraph,
|
|
143
|
+
showOnEmptyParagraph
|
|
144
|
+
}) => ({
|
|
126
145
|
hasPlaceholder: false,
|
|
127
146
|
placeholderText,
|
|
128
147
|
placeholderPrompts,
|
|
129
148
|
userHadTyped,
|
|
130
|
-
typedAndDeleted: false
|
|
149
|
+
typedAndDeleted: false,
|
|
150
|
+
canShowOnEmptyParagraph,
|
|
151
|
+
showOnEmptyParagraph,
|
|
152
|
+
pos
|
|
131
153
|
});
|
|
132
154
|
function createPlaceHolderStateFrom({
|
|
155
|
+
isInitial,
|
|
133
156
|
isEditorFocused,
|
|
134
157
|
editorState,
|
|
135
158
|
isTypeAheadOpen,
|
|
@@ -140,19 +163,60 @@ function createPlaceHolderStateFrom({
|
|
|
140
163
|
placeholderPrompts,
|
|
141
164
|
typedAndDeleted,
|
|
142
165
|
userHadTyped,
|
|
143
|
-
isPlaceholderHidden
|
|
166
|
+
isPlaceholderHidden,
|
|
167
|
+
withEmptyParagraph,
|
|
168
|
+
showOnEmptyParagraph
|
|
144
169
|
}) {
|
|
145
170
|
if (isPlaceholderHidden && fg('platform_editor_ai_aifc_patch_beta')) {
|
|
146
171
|
return {
|
|
147
|
-
...emptyPlaceholder(
|
|
172
|
+
...emptyPlaceholder({
|
|
173
|
+
placeholderText: defaultPlaceholderText,
|
|
174
|
+
placeholderPrompts,
|
|
175
|
+
userHadTyped
|
|
176
|
+
}),
|
|
148
177
|
isPlaceholderHidden
|
|
149
178
|
};
|
|
150
179
|
}
|
|
151
180
|
if (isTypeAheadOpen !== null && isTypeAheadOpen !== void 0 && isTypeAheadOpen(editorState)) {
|
|
152
|
-
return emptyPlaceholder(
|
|
181
|
+
return emptyPlaceholder({
|
|
182
|
+
placeholderText: defaultPlaceholderText,
|
|
183
|
+
placeholderPrompts,
|
|
184
|
+
userHadTyped
|
|
185
|
+
});
|
|
153
186
|
}
|
|
154
187
|
if ((defaultPlaceholderText || placeholderPrompts) && isEmptyDocument(editorState.doc)) {
|
|
155
|
-
return setPlaceHolderState(
|
|
188
|
+
return setPlaceHolderState({
|
|
189
|
+
placeholderText: defaultPlaceholderText,
|
|
190
|
+
pos: 1,
|
|
191
|
+
placeholderPrompts,
|
|
192
|
+
typedAndDeleted,
|
|
193
|
+
userHadTyped
|
|
194
|
+
});
|
|
195
|
+
}
|
|
196
|
+
if (fg('platform_editor_ai_aifc_patch_beta_2')) {
|
|
197
|
+
const {
|
|
198
|
+
from,
|
|
199
|
+
to,
|
|
200
|
+
$to
|
|
201
|
+
} = editorState.selection;
|
|
202
|
+
if (defaultPlaceholderText && withEmptyParagraph && isEditorFocused && !isInitial && !isEmptyDocument(editorState.doc) && from === to && isEmptyParagraph($to.parent) && hasDocAsParent($to)) {
|
|
203
|
+
return showOnEmptyParagraph ? setPlaceHolderState({
|
|
204
|
+
placeholderText: defaultPlaceholderText,
|
|
205
|
+
pos: to,
|
|
206
|
+
placeholderPrompts,
|
|
207
|
+
typedAndDeleted,
|
|
208
|
+
userHadTyped,
|
|
209
|
+
canShowOnEmptyParagraph: true,
|
|
210
|
+
showOnEmptyParagraph: true
|
|
211
|
+
}) : emptyPlaceholder({
|
|
212
|
+
placeholderText: defaultPlaceholderText,
|
|
213
|
+
placeholderPrompts,
|
|
214
|
+
userHadTyped,
|
|
215
|
+
canShowOnEmptyParagraph: true,
|
|
216
|
+
showOnEmptyParagraph: false,
|
|
217
|
+
pos: to
|
|
218
|
+
});
|
|
219
|
+
}
|
|
156
220
|
}
|
|
157
221
|
if (isEditorFocused && editorExperiment('platform_editor_controls', 'variant1')) {
|
|
158
222
|
var _parentNode$firstChil, _parentNode$firstChil2;
|
|
@@ -161,14 +225,24 @@ function createPlaceHolderStateFrom({
|
|
|
161
225
|
$to
|
|
162
226
|
} = editorState.selection;
|
|
163
227
|
if ($from.pos !== $to.pos) {
|
|
164
|
-
return emptyPlaceholder(
|
|
228
|
+
return emptyPlaceholder({
|
|
229
|
+
placeholderText: defaultPlaceholderText,
|
|
230
|
+
placeholderPrompts,
|
|
231
|
+
userHadTyped
|
|
232
|
+
});
|
|
165
233
|
}
|
|
166
234
|
const parentNode = $from.node($from.depth - 1);
|
|
167
235
|
const parentType = parentNode === null || parentNode === void 0 ? void 0 : parentNode.type.name;
|
|
168
236
|
if (emptyLinePlaceholder && parentType === 'doc') {
|
|
169
237
|
const isEmptyLine = isEmptyParagraph($from.parent);
|
|
170
238
|
if (isEmptyLine) {
|
|
171
|
-
return setPlaceHolderState(
|
|
239
|
+
return setPlaceHolderState({
|
|
240
|
+
placeholderText: emptyLinePlaceholder,
|
|
241
|
+
pos: $from.pos,
|
|
242
|
+
placeholderPrompts,
|
|
243
|
+
typedAndDeleted,
|
|
244
|
+
userHadTyped
|
|
245
|
+
});
|
|
172
246
|
}
|
|
173
247
|
}
|
|
174
248
|
const isEmptyNode = (parentNode === null || parentNode === void 0 ? void 0 : parentNode.childCount) === 1 && ((_parentNode$firstChil = parentNode.firstChild) === null || _parentNode$firstChil === void 0 ? void 0 : _parentNode$firstChil.content.size) === 0 && ((_parentNode$firstChil2 = parentNode.firstChild) === null || _parentNode$firstChil2 === void 0 ? void 0 : _parentNode$firstChil2.type.name) === 'paragraph';
|
|
@@ -176,20 +250,46 @@ function createPlaceHolderStateFrom({
|
|
|
176
250
|
var _table$node$firstChil;
|
|
177
251
|
const table = findParentNode(node => node.type === editorState.schema.nodes.table)(editorState.selection);
|
|
178
252
|
if (!table) {
|
|
179
|
-
return emptyPlaceholder(
|
|
253
|
+
return emptyPlaceholder({
|
|
254
|
+
placeholderText: defaultPlaceholderText,
|
|
255
|
+
placeholderPrompts,
|
|
256
|
+
userHadTyped
|
|
257
|
+
});
|
|
180
258
|
}
|
|
181
259
|
const isFirstCell = (table === null || table === void 0 ? void 0 : (_table$node$firstChil = table.node.firstChild) === null || _table$node$firstChil === void 0 ? void 0 : _table$node$firstChil.content.firstChild) === parentNode;
|
|
182
260
|
if (isFirstCell) {
|
|
183
|
-
return setPlaceHolderState(
|
|
261
|
+
return setPlaceHolderState({
|
|
262
|
+
placeholderText: intl.formatMessage(messages.shortEmptyNodePlaceholderText),
|
|
263
|
+
pos: $from.pos,
|
|
264
|
+
placeholderPrompts,
|
|
265
|
+
typedAndDeleted,
|
|
266
|
+
userHadTyped
|
|
267
|
+
});
|
|
184
268
|
}
|
|
185
269
|
}
|
|
186
270
|
if (nodeTypesWithLongPlaceholderText.includes(parentType) && isEmptyNode) {
|
|
187
|
-
return setPlaceHolderState(
|
|
271
|
+
return setPlaceHolderState({
|
|
272
|
+
placeholderText: intl.formatMessage(messages.longEmptyNodePlaceholderText),
|
|
273
|
+
pos: $from.pos,
|
|
274
|
+
placeholderPrompts,
|
|
275
|
+
typedAndDeleted,
|
|
276
|
+
userHadTyped
|
|
277
|
+
});
|
|
188
278
|
}
|
|
189
279
|
if (nodeTypesWithSyncBlockPlaceholderText.includes(parentType) && isEmptyNode && expValEquals('platform_synced_block', 'isEnabled', true)) {
|
|
190
|
-
return setPlaceHolderState(
|
|
280
|
+
return setPlaceHolderState({
|
|
281
|
+
placeholderText: intl.formatMessage(messages.syncBlockPlaceholderText),
|
|
282
|
+
pos: $from.pos,
|
|
283
|
+
placeholderPrompts,
|
|
284
|
+
typedAndDeleted,
|
|
285
|
+
userHadTyped
|
|
286
|
+
});
|
|
191
287
|
}
|
|
192
|
-
return emptyPlaceholder(
|
|
288
|
+
return emptyPlaceholder({
|
|
289
|
+
placeholderText: defaultPlaceholderText,
|
|
290
|
+
placeholderPrompts,
|
|
291
|
+
userHadTyped
|
|
292
|
+
});
|
|
193
293
|
}
|
|
194
294
|
if (bracketPlaceholderText && bracketTyped(editorState) && isEditorFocused) {
|
|
195
295
|
const {
|
|
@@ -197,9 +297,19 @@ function createPlaceHolderStateFrom({
|
|
|
197
297
|
} = editorState.selection;
|
|
198
298
|
// Space is to account for positioning of the bracket
|
|
199
299
|
const bracketHint = ' ' + bracketPlaceholderText;
|
|
200
|
-
return setPlaceHolderState(
|
|
300
|
+
return setPlaceHolderState({
|
|
301
|
+
placeholderText: bracketHint,
|
|
302
|
+
pos: $from.pos - 1,
|
|
303
|
+
placeholderPrompts,
|
|
304
|
+
typedAndDeleted,
|
|
305
|
+
userHadTyped
|
|
306
|
+
});
|
|
201
307
|
}
|
|
202
|
-
return emptyPlaceholder(
|
|
308
|
+
return emptyPlaceholder({
|
|
309
|
+
placeholderText: defaultPlaceholderText,
|
|
310
|
+
placeholderPrompts,
|
|
311
|
+
userHadTyped
|
|
312
|
+
});
|
|
203
313
|
}
|
|
204
314
|
function calculateUserInteractionState({
|
|
205
315
|
placeholderState,
|
|
@@ -222,7 +332,7 @@ function calculateUserInteractionState({
|
|
|
222
332
|
typedAndDeleted: isInTypedAndDeletedState
|
|
223
333
|
};
|
|
224
334
|
}
|
|
225
|
-
export function createPlugin(intl, defaultPlaceholderText, bracketPlaceholderText, emptyLinePlaceholder, placeholderPrompts, api) {
|
|
335
|
+
export function createPlugin(intl, defaultPlaceholderText, bracketPlaceholderText, emptyLinePlaceholder, placeholderPrompts, withEmptyParagraph, api) {
|
|
226
336
|
if (!defaultPlaceholderText && !placeholderPrompts && !bracketPlaceholderText) {
|
|
227
337
|
return;
|
|
228
338
|
}
|
|
@@ -238,6 +348,7 @@ export function createPlugin(intl, defaultPlaceholderText, bracketPlaceholderTex
|
|
|
238
348
|
init: (_, state) => {
|
|
239
349
|
var _api$focus, _api$focus$sharedStat, _api$typeAhead;
|
|
240
350
|
return createPlaceHolderStateFrom({
|
|
351
|
+
isInitial: true,
|
|
241
352
|
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),
|
|
242
353
|
editorState: state,
|
|
243
354
|
isTypeAheadOpen: api === null || api === void 0 ? void 0 : (_api$typeAhead = api.typeAhead) === null || _api$typeAhead === void 0 ? void 0 : _api$typeAhead.actions.isOpen,
|
|
@@ -251,7 +362,7 @@ export function createPlugin(intl, defaultPlaceholderText, bracketPlaceholderTex
|
|
|
251
362
|
});
|
|
252
363
|
},
|
|
253
364
|
apply: (tr, placeholderState, _oldEditorState, newEditorState) => {
|
|
254
|
-
var _api$focus2, _api$focus2$sharedSta, _placeholderState$isP, _api$typeAhead2, _ref, _meta$placeholderText, _ref2, _meta$placeholderProm;
|
|
365
|
+
var _api$focus2, _api$focus2$sharedSta, _placeholderState$isP, _api$typeAhead2, _ref, _meta$placeholderText, _ref2, _meta$placeholderProm, _meta$showOnEmptyPara;
|
|
255
366
|
const meta = tr.getMeta(pluginKey);
|
|
256
367
|
const isEditorFocused = Boolean(api === null || api === void 0 ? void 0 : (_api$focus2 = api.focus) === null || _api$focus2 === void 0 ? void 0 : (_api$focus2$sharedSta = _api$focus2.sharedState.currentState()) === null || _api$focus2$sharedSta === void 0 ? void 0 : _api$focus2$sharedSta.hasFocus);
|
|
257
368
|
const {
|
|
@@ -266,18 +377,23 @@ export function createPlugin(intl, defaultPlaceholderText, bracketPlaceholderTex
|
|
|
266
377
|
if ((meta === null || meta === void 0 ? void 0 : meta.isPlaceholderHidden) !== undefined && fg('platform_editor_ai_aifc_patch_beta')) {
|
|
267
378
|
isPlaceholderHidden = meta.isPlaceholderHidden;
|
|
268
379
|
}
|
|
380
|
+
if ((meta === null || meta === void 0 ? void 0 : meta.placeholderText) !== undefined && fg('platform_editor_ai_aifc_patch_beta_2')) {
|
|
381
|
+
defaultPlaceholderText = meta.placeholderText;
|
|
382
|
+
}
|
|
269
383
|
const newPlaceholderState = createPlaceHolderStateFrom({
|
|
270
384
|
isEditorFocused,
|
|
271
385
|
editorState: newEditorState,
|
|
272
386
|
isTypeAheadOpen: api === null || api === void 0 ? void 0 : (_api$typeAhead2 = api.typeAhead) === null || _api$typeAhead2 === void 0 ? void 0 : _api$typeAhead2.actions.isOpen,
|
|
273
|
-
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,
|
|
387
|
+
defaultPlaceholderText: fg('platform_editor_ai_aifc_patch_beta_2') ? 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,
|
|
274
388
|
bracketPlaceholderText,
|
|
275
389
|
emptyLinePlaceholder,
|
|
276
390
|
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,
|
|
277
391
|
typedAndDeleted,
|
|
278
392
|
userHadTyped,
|
|
279
393
|
intl,
|
|
280
|
-
isPlaceholderHidden
|
|
394
|
+
isPlaceholderHidden,
|
|
395
|
+
withEmptyParagraph,
|
|
396
|
+
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
|
|
281
397
|
});
|
|
282
398
|
|
|
283
399
|
// Clear timeouts when hasPlaceholder becomes false
|
|
@@ -312,9 +428,51 @@ export function createPlugin(intl, defaultPlaceholderText, bracketPlaceholderTex
|
|
|
312
428
|
}
|
|
313
429
|
},
|
|
314
430
|
view() {
|
|
431
|
+
let timeoutId;
|
|
432
|
+
function startEmptyParagraphTimeout(editorView) {
|
|
433
|
+
if (timeoutId) {
|
|
434
|
+
return;
|
|
435
|
+
}
|
|
436
|
+
timeoutId = setTimeout(() => {
|
|
437
|
+
timeoutId = undefined;
|
|
438
|
+
editorView.dispatch(editorView.state.tr.setMeta(pluginKey, {
|
|
439
|
+
showOnEmptyParagraph: true
|
|
440
|
+
}));
|
|
441
|
+
}, EMPTY_PARAGRAPH_TIMEOUT_DELAY);
|
|
442
|
+
}
|
|
443
|
+
function destroyEmptyParagraphTimeout() {
|
|
444
|
+
if (timeoutId) {
|
|
445
|
+
clearTimeout(timeoutId);
|
|
446
|
+
timeoutId = undefined;
|
|
447
|
+
}
|
|
448
|
+
}
|
|
315
449
|
return {
|
|
450
|
+
update(editorView, prevState) {
|
|
451
|
+
if (fg('platform_editor_ai_aifc_patch_beta_2')) {
|
|
452
|
+
const prevPluginState = getPlaceholderState(prevState);
|
|
453
|
+
const newPluginState = getPlaceholderState(editorView.state);
|
|
454
|
+
|
|
455
|
+
// user start typing after move to an empty paragraph, clear timeout
|
|
456
|
+
if (!newPluginState.canShowOnEmptyParagraph && timeoutId) {
|
|
457
|
+
destroyEmptyParagraphTimeout();
|
|
458
|
+
}
|
|
459
|
+
// user move to an empty paragraph again, reset state to hide placeholder, and restart timeout
|
|
460
|
+
else if (prevPluginState.canShowOnEmptyParagraph && newPluginState.canShowOnEmptyParagraph && newPluginState.pos !== prevPluginState.pos) {
|
|
461
|
+
editorView.dispatch(editorView.state.tr.setMeta(pluginKey, {
|
|
462
|
+
showOnEmptyParagraph: false
|
|
463
|
+
}));
|
|
464
|
+
destroyEmptyParagraphTimeout();
|
|
465
|
+
startEmptyParagraphTimeout(editorView);
|
|
466
|
+
}
|
|
467
|
+
// user move to an empty paragraph (by click enter or move to an empty paragraph), start timeout
|
|
468
|
+
else if (!prevPluginState.canShowOnEmptyParagraph && newPluginState.canShowOnEmptyParagraph && !newPluginState.showOnEmptyParagraph && !timeoutId) {
|
|
469
|
+
startEmptyParagraphTimeout(editorView);
|
|
470
|
+
}
|
|
471
|
+
}
|
|
472
|
+
},
|
|
316
473
|
destroy() {
|
|
317
474
|
clearAllTypewriterTimeouts();
|
|
475
|
+
destroyEmptyParagraphTimeout();
|
|
318
476
|
isDestroyed = true;
|
|
319
477
|
}
|
|
320
478
|
};
|
|
@@ -360,7 +518,7 @@ export const placeholderPlugin = ({
|
|
|
360
518
|
name: 'placeholder',
|
|
361
519
|
plugin: ({
|
|
362
520
|
getIntl
|
|
363
|
-
}) => createPlugin(getIntl(), options && options.placeholder, options && options.placeholderBracketHint, options && options.emptyLinePlaceholder, options && options.placeholderPrompts, api)
|
|
521
|
+
}) => createPlugin(getIntl(), options && options.placeholder, options && options.placeholderBracketHint, options && options.emptyLinePlaceholder, options && options.placeholderPrompts, options === null || options === void 0 ? void 0 : options.withEmptyParagraph, api)
|
|
364
522
|
}];
|
|
365
523
|
}
|
|
366
524
|
};
|
|
@@ -3,7 +3,7 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
|
|
|
3
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
4
|
import { placeholderTextMessages as messages } from '@atlaskit/editor-common/messages';
|
|
5
5
|
import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
|
|
6
|
-
import { bracketTyped, browser, isEmptyDocument, isEmptyParagraph } from '@atlaskit/editor-common/utils';
|
|
6
|
+
import { bracketTyped, browser, hasDocAsParent, isEmptyDocument, isEmptyParagraph } from '@atlaskit/editor-common/utils';
|
|
7
7
|
import { PluginKey } from '@atlaskit/editor-prosemirror/state';
|
|
8
8
|
import { findParentNode } from '@atlaskit/editor-prosemirror/utils';
|
|
9
9
|
import { Decoration, DecorationSet } from '@atlaskit/editor-prosemirror/view';
|
|
@@ -17,6 +17,8 @@ var TYPEWRITER_ERASE_DELAY = 40; // Delay between erasing each character
|
|
|
17
17
|
var TYPEWRITER_CYCLE_DELAY = 500; // Delay before starting next cycle
|
|
18
18
|
var TYPEWRITER_TYPED_AND_DELETED_DELAY = 1500; // Delay before starting animation after user typed and deleted
|
|
19
19
|
|
|
20
|
+
export var EMPTY_PARAGRAPH_TIMEOUT_DELAY = 2000; // Delay before showing placeholder on empty paragraph
|
|
21
|
+
|
|
20
22
|
export var pluginKey = new PluginKey('placeholderPlugin');
|
|
21
23
|
var placeholderTestId = 'placeholder-test-id';
|
|
22
24
|
function getPlaceholderState(editorState) {
|
|
@@ -120,62 +122,131 @@ export function createPlaceholderDecoration(editorState, placeholderText, placeh
|
|
|
120
122
|
key: "placeholder ".concat(placeholderText)
|
|
121
123
|
})]);
|
|
122
124
|
}
|
|
123
|
-
function setPlaceHolderState(
|
|
125
|
+
function setPlaceHolderState(_ref) {
|
|
126
|
+
var placeholderText = _ref.placeholderText,
|
|
127
|
+
pos = _ref.pos,
|
|
128
|
+
placeholderPrompts = _ref.placeholderPrompts,
|
|
129
|
+
typedAndDeleted = _ref.typedAndDeleted,
|
|
130
|
+
userHadTyped = _ref.userHadTyped,
|
|
131
|
+
canShowOnEmptyParagraph = _ref.canShowOnEmptyParagraph,
|
|
132
|
+
showOnEmptyParagraph = _ref.showOnEmptyParagraph;
|
|
124
133
|
return {
|
|
125
134
|
hasPlaceholder: true,
|
|
126
135
|
placeholderText: placeholderText,
|
|
127
136
|
placeholderPrompts: placeholderPrompts,
|
|
128
137
|
pos: pos ? pos : 1,
|
|
129
138
|
typedAndDeleted: typedAndDeleted,
|
|
130
|
-
userHadTyped: userHadTyped
|
|
139
|
+
userHadTyped: userHadTyped,
|
|
140
|
+
canShowOnEmptyParagraph: canShowOnEmptyParagraph,
|
|
141
|
+
showOnEmptyParagraph: showOnEmptyParagraph
|
|
131
142
|
};
|
|
132
143
|
}
|
|
133
|
-
var emptyPlaceholder = function emptyPlaceholder(
|
|
144
|
+
var emptyPlaceholder = function emptyPlaceholder(_ref2) {
|
|
145
|
+
var placeholderText = _ref2.placeholderText,
|
|
146
|
+
placeholderPrompts = _ref2.placeholderPrompts,
|
|
147
|
+
userHadTyped = _ref2.userHadTyped,
|
|
148
|
+
pos = _ref2.pos,
|
|
149
|
+
canShowOnEmptyParagraph = _ref2.canShowOnEmptyParagraph,
|
|
150
|
+
showOnEmptyParagraph = _ref2.showOnEmptyParagraph;
|
|
134
151
|
return {
|
|
135
152
|
hasPlaceholder: false,
|
|
136
153
|
placeholderText: placeholderText,
|
|
137
154
|
placeholderPrompts: placeholderPrompts,
|
|
138
155
|
userHadTyped: userHadTyped,
|
|
139
|
-
typedAndDeleted: false
|
|
156
|
+
typedAndDeleted: false,
|
|
157
|
+
canShowOnEmptyParagraph: canShowOnEmptyParagraph,
|
|
158
|
+
showOnEmptyParagraph: showOnEmptyParagraph,
|
|
159
|
+
pos: pos
|
|
140
160
|
};
|
|
141
161
|
};
|
|
142
|
-
function createPlaceHolderStateFrom(
|
|
143
|
-
var
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
162
|
+
function createPlaceHolderStateFrom(_ref3) {
|
|
163
|
+
var isInitial = _ref3.isInitial,
|
|
164
|
+
isEditorFocused = _ref3.isEditorFocused,
|
|
165
|
+
editorState = _ref3.editorState,
|
|
166
|
+
isTypeAheadOpen = _ref3.isTypeAheadOpen,
|
|
167
|
+
defaultPlaceholderText = _ref3.defaultPlaceholderText,
|
|
168
|
+
intl = _ref3.intl,
|
|
169
|
+
bracketPlaceholderText = _ref3.bracketPlaceholderText,
|
|
170
|
+
emptyLinePlaceholder = _ref3.emptyLinePlaceholder,
|
|
171
|
+
placeholderPrompts = _ref3.placeholderPrompts,
|
|
172
|
+
typedAndDeleted = _ref3.typedAndDeleted,
|
|
173
|
+
userHadTyped = _ref3.userHadTyped,
|
|
174
|
+
isPlaceholderHidden = _ref3.isPlaceholderHidden,
|
|
175
|
+
withEmptyParagraph = _ref3.withEmptyParagraph,
|
|
176
|
+
showOnEmptyParagraph = _ref3.showOnEmptyParagraph;
|
|
154
177
|
if (isPlaceholderHidden && fg('platform_editor_ai_aifc_patch_beta')) {
|
|
155
|
-
return _objectSpread(_objectSpread({}, emptyPlaceholder(
|
|
178
|
+
return _objectSpread(_objectSpread({}, emptyPlaceholder({
|
|
179
|
+
placeholderText: defaultPlaceholderText,
|
|
180
|
+
placeholderPrompts: placeholderPrompts,
|
|
181
|
+
userHadTyped: userHadTyped
|
|
182
|
+
})), {}, {
|
|
156
183
|
isPlaceholderHidden: isPlaceholderHidden
|
|
157
184
|
});
|
|
158
185
|
}
|
|
159
186
|
if (isTypeAheadOpen !== null && isTypeAheadOpen !== void 0 && isTypeAheadOpen(editorState)) {
|
|
160
|
-
return emptyPlaceholder(
|
|
187
|
+
return emptyPlaceholder({
|
|
188
|
+
placeholderText: defaultPlaceholderText,
|
|
189
|
+
placeholderPrompts: placeholderPrompts,
|
|
190
|
+
userHadTyped: userHadTyped
|
|
191
|
+
});
|
|
161
192
|
}
|
|
162
193
|
if ((defaultPlaceholderText || placeholderPrompts) && isEmptyDocument(editorState.doc)) {
|
|
163
|
-
return setPlaceHolderState(
|
|
194
|
+
return setPlaceHolderState({
|
|
195
|
+
placeholderText: defaultPlaceholderText,
|
|
196
|
+
pos: 1,
|
|
197
|
+
placeholderPrompts: placeholderPrompts,
|
|
198
|
+
typedAndDeleted: typedAndDeleted,
|
|
199
|
+
userHadTyped: userHadTyped
|
|
200
|
+
});
|
|
164
201
|
}
|
|
165
|
-
if (
|
|
166
|
-
var _parentNode$firstChil, _parentNode$firstChil2;
|
|
202
|
+
if (fg('platform_editor_ai_aifc_patch_beta_2')) {
|
|
167
203
|
var _editorState$selectio = editorState.selection,
|
|
168
|
-
|
|
204
|
+
from = _editorState$selectio.from,
|
|
205
|
+
to = _editorState$selectio.to,
|
|
169
206
|
$to = _editorState$selectio.$to;
|
|
170
|
-
if (
|
|
171
|
-
return
|
|
207
|
+
if (defaultPlaceholderText && withEmptyParagraph && isEditorFocused && !isInitial && !isEmptyDocument(editorState.doc) && from === to && isEmptyParagraph($to.parent) && hasDocAsParent($to)) {
|
|
208
|
+
return showOnEmptyParagraph ? setPlaceHolderState({
|
|
209
|
+
placeholderText: defaultPlaceholderText,
|
|
210
|
+
pos: to,
|
|
211
|
+
placeholderPrompts: placeholderPrompts,
|
|
212
|
+
typedAndDeleted: typedAndDeleted,
|
|
213
|
+
userHadTyped: userHadTyped,
|
|
214
|
+
canShowOnEmptyParagraph: true,
|
|
215
|
+
showOnEmptyParagraph: true
|
|
216
|
+
}) : emptyPlaceholder({
|
|
217
|
+
placeholderText: defaultPlaceholderText,
|
|
218
|
+
placeholderPrompts: placeholderPrompts,
|
|
219
|
+
userHadTyped: userHadTyped,
|
|
220
|
+
canShowOnEmptyParagraph: true,
|
|
221
|
+
showOnEmptyParagraph: false,
|
|
222
|
+
pos: to
|
|
223
|
+
});
|
|
224
|
+
}
|
|
225
|
+
}
|
|
226
|
+
if (isEditorFocused && editorExperiment('platform_editor_controls', 'variant1')) {
|
|
227
|
+
var _parentNode$firstChil, _parentNode$firstChil2;
|
|
228
|
+
var _editorState$selectio2 = editorState.selection,
|
|
229
|
+
$from = _editorState$selectio2.$from,
|
|
230
|
+
_$to = _editorState$selectio2.$to;
|
|
231
|
+
if ($from.pos !== _$to.pos) {
|
|
232
|
+
return emptyPlaceholder({
|
|
233
|
+
placeholderText: defaultPlaceholderText,
|
|
234
|
+
placeholderPrompts: placeholderPrompts,
|
|
235
|
+
userHadTyped: userHadTyped
|
|
236
|
+
});
|
|
172
237
|
}
|
|
173
238
|
var parentNode = $from.node($from.depth - 1);
|
|
174
239
|
var parentType = parentNode === null || parentNode === void 0 ? void 0 : parentNode.type.name;
|
|
175
240
|
if (emptyLinePlaceholder && parentType === 'doc') {
|
|
176
241
|
var isEmptyLine = isEmptyParagraph($from.parent);
|
|
177
242
|
if (isEmptyLine) {
|
|
178
|
-
return setPlaceHolderState(
|
|
243
|
+
return setPlaceHolderState({
|
|
244
|
+
placeholderText: emptyLinePlaceholder,
|
|
245
|
+
pos: $from.pos,
|
|
246
|
+
placeholderPrompts: placeholderPrompts,
|
|
247
|
+
typedAndDeleted: typedAndDeleted,
|
|
248
|
+
userHadTyped: userHadTyped
|
|
249
|
+
});
|
|
179
250
|
}
|
|
180
251
|
}
|
|
181
252
|
var isEmptyNode = (parentNode === null || parentNode === void 0 ? void 0 : parentNode.childCount) === 1 && ((_parentNode$firstChil = parentNode.firstChild) === null || _parentNode$firstChil === void 0 ? void 0 : _parentNode$firstChil.content.size) === 0 && ((_parentNode$firstChil2 = parentNode.firstChild) === null || _parentNode$firstChil2 === void 0 ? void 0 : _parentNode$firstChil2.type.name) === 'paragraph';
|
|
@@ -185,33 +256,69 @@ function createPlaceHolderStateFrom(_ref) {
|
|
|
185
256
|
return node.type === editorState.schema.nodes.table;
|
|
186
257
|
})(editorState.selection);
|
|
187
258
|
if (!table) {
|
|
188
|
-
return emptyPlaceholder(
|
|
259
|
+
return emptyPlaceholder({
|
|
260
|
+
placeholderText: defaultPlaceholderText,
|
|
261
|
+
placeholderPrompts: placeholderPrompts,
|
|
262
|
+
userHadTyped: userHadTyped
|
|
263
|
+
});
|
|
189
264
|
}
|
|
190
265
|
var isFirstCell = (table === null || table === void 0 || (_table$node$firstChil = table.node.firstChild) === null || _table$node$firstChil === void 0 ? void 0 : _table$node$firstChil.content.firstChild) === parentNode;
|
|
191
266
|
if (isFirstCell) {
|
|
192
|
-
return setPlaceHolderState(
|
|
267
|
+
return setPlaceHolderState({
|
|
268
|
+
placeholderText: intl.formatMessage(messages.shortEmptyNodePlaceholderText),
|
|
269
|
+
pos: $from.pos,
|
|
270
|
+
placeholderPrompts: placeholderPrompts,
|
|
271
|
+
typedAndDeleted: typedAndDeleted,
|
|
272
|
+
userHadTyped: userHadTyped
|
|
273
|
+
});
|
|
193
274
|
}
|
|
194
275
|
}
|
|
195
276
|
if (nodeTypesWithLongPlaceholderText.includes(parentType) && isEmptyNode) {
|
|
196
|
-
return setPlaceHolderState(
|
|
277
|
+
return setPlaceHolderState({
|
|
278
|
+
placeholderText: intl.formatMessage(messages.longEmptyNodePlaceholderText),
|
|
279
|
+
pos: $from.pos,
|
|
280
|
+
placeholderPrompts: placeholderPrompts,
|
|
281
|
+
typedAndDeleted: typedAndDeleted,
|
|
282
|
+
userHadTyped: userHadTyped
|
|
283
|
+
});
|
|
197
284
|
}
|
|
198
285
|
if (nodeTypesWithSyncBlockPlaceholderText.includes(parentType) && isEmptyNode && expValEquals('platform_synced_block', 'isEnabled', true)) {
|
|
199
|
-
return setPlaceHolderState(
|
|
286
|
+
return setPlaceHolderState({
|
|
287
|
+
placeholderText: intl.formatMessage(messages.syncBlockPlaceholderText),
|
|
288
|
+
pos: $from.pos,
|
|
289
|
+
placeholderPrompts: placeholderPrompts,
|
|
290
|
+
typedAndDeleted: typedAndDeleted,
|
|
291
|
+
userHadTyped: userHadTyped
|
|
292
|
+
});
|
|
200
293
|
}
|
|
201
|
-
return emptyPlaceholder(
|
|
294
|
+
return emptyPlaceholder({
|
|
295
|
+
placeholderText: defaultPlaceholderText,
|
|
296
|
+
placeholderPrompts: placeholderPrompts,
|
|
297
|
+
userHadTyped: userHadTyped
|
|
298
|
+
});
|
|
202
299
|
}
|
|
203
300
|
if (bracketPlaceholderText && bracketTyped(editorState) && isEditorFocused) {
|
|
204
301
|
var _$from = editorState.selection.$from;
|
|
205
302
|
// Space is to account for positioning of the bracket
|
|
206
303
|
var bracketHint = ' ' + bracketPlaceholderText;
|
|
207
|
-
return setPlaceHolderState(
|
|
304
|
+
return setPlaceHolderState({
|
|
305
|
+
placeholderText: bracketHint,
|
|
306
|
+
pos: _$from.pos - 1,
|
|
307
|
+
placeholderPrompts: placeholderPrompts,
|
|
308
|
+
typedAndDeleted: typedAndDeleted,
|
|
309
|
+
userHadTyped: userHadTyped
|
|
310
|
+
});
|
|
208
311
|
}
|
|
209
|
-
return emptyPlaceholder(
|
|
312
|
+
return emptyPlaceholder({
|
|
313
|
+
placeholderText: defaultPlaceholderText,
|
|
314
|
+
placeholderPrompts: placeholderPrompts,
|
|
315
|
+
userHadTyped: userHadTyped
|
|
316
|
+
});
|
|
210
317
|
}
|
|
211
|
-
function calculateUserInteractionState(
|
|
212
|
-
var placeholderState =
|
|
213
|
-
oldEditorState =
|
|
214
|
-
newEditorState =
|
|
318
|
+
function calculateUserInteractionState(_ref4) {
|
|
319
|
+
var placeholderState = _ref4.placeholderState,
|
|
320
|
+
oldEditorState = _ref4.oldEditorState,
|
|
321
|
+
newEditorState = _ref4.newEditorState;
|
|
215
322
|
var wasEmpty = oldEditorState ? isEmptyDocument(oldEditorState.doc) : true;
|
|
216
323
|
var isEmpty = isEmptyDocument(newEditorState.doc);
|
|
217
324
|
var hasEverTyped = Boolean(placeholderState === null || placeholderState === void 0 ? void 0 : placeholderState.userHadTyped) ||
|
|
@@ -228,7 +335,7 @@ function calculateUserInteractionState(_ref2) {
|
|
|
228
335
|
typedAndDeleted: isInTypedAndDeletedState
|
|
229
336
|
};
|
|
230
337
|
}
|
|
231
|
-
export function createPlugin(intl, defaultPlaceholderText, bracketPlaceholderText, emptyLinePlaceholder, placeholderPrompts, api) {
|
|
338
|
+
export function createPlugin(intl, defaultPlaceholderText, bracketPlaceholderText, emptyLinePlaceholder, placeholderPrompts, withEmptyParagraph, api) {
|
|
232
339
|
if (!defaultPlaceholderText && !placeholderPrompts && !bracketPlaceholderText) {
|
|
233
340
|
return;
|
|
234
341
|
}
|
|
@@ -246,6 +353,7 @@ export function createPlugin(intl, defaultPlaceholderText, bracketPlaceholderTex
|
|
|
246
353
|
init: function init(_, state) {
|
|
247
354
|
var _api$focus, _api$typeAhead;
|
|
248
355
|
return createPlaceHolderStateFrom({
|
|
356
|
+
isInitial: true,
|
|
249
357
|
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),
|
|
250
358
|
editorState: state,
|
|
251
359
|
isTypeAheadOpen: api === null || api === void 0 || (_api$typeAhead = api.typeAhead) === null || _api$typeAhead === void 0 ? void 0 : _api$typeAhead.actions.isOpen,
|
|
@@ -259,7 +367,7 @@ export function createPlugin(intl, defaultPlaceholderText, bracketPlaceholderTex
|
|
|
259
367
|
});
|
|
260
368
|
},
|
|
261
369
|
apply: function apply(tr, placeholderState, _oldEditorState, newEditorState) {
|
|
262
|
-
var _api$focus2, _placeholderState$isP, _api$typeAhead2,
|
|
370
|
+
var _api$focus2, _placeholderState$isP, _api$typeAhead2, _ref5, _meta$placeholderText, _ref6, _meta$placeholderProm, _meta$showOnEmptyPara;
|
|
263
371
|
var meta = tr.getMeta(pluginKey);
|
|
264
372
|
var isEditorFocused = Boolean(api === null || api === void 0 || (_api$focus2 = api.focus) === null || _api$focus2 === void 0 || (_api$focus2 = _api$focus2.sharedState.currentState()) === null || _api$focus2 === void 0 ? void 0 : _api$focus2.hasFocus);
|
|
265
373
|
var _calculateUserInterac = calculateUserInteractionState({
|
|
@@ -273,18 +381,23 @@ export function createPlugin(intl, defaultPlaceholderText, bracketPlaceholderTex
|
|
|
273
381
|
if ((meta === null || meta === void 0 ? void 0 : meta.isPlaceholderHidden) !== undefined && fg('platform_editor_ai_aifc_patch_beta')) {
|
|
274
382
|
isPlaceholderHidden = meta.isPlaceholderHidden;
|
|
275
383
|
}
|
|
384
|
+
if ((meta === null || meta === void 0 ? void 0 : meta.placeholderText) !== undefined && fg('platform_editor_ai_aifc_patch_beta_2')) {
|
|
385
|
+
defaultPlaceholderText = meta.placeholderText;
|
|
386
|
+
}
|
|
276
387
|
var newPlaceholderState = createPlaceHolderStateFrom({
|
|
277
388
|
isEditorFocused: isEditorFocused,
|
|
278
389
|
editorState: newEditorState,
|
|
279
390
|
isTypeAheadOpen: api === null || api === void 0 || (_api$typeAhead2 = api.typeAhead) === null || _api$typeAhead2 === void 0 ? void 0 : _api$typeAhead2.actions.isOpen,
|
|
280
|
-
defaultPlaceholderText: (
|
|
391
|
+
defaultPlaceholderText: fg('platform_editor_ai_aifc_patch_beta_2') ? defaultPlaceholderText : (_ref5 = (_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 && _ref5 !== void 0 ? _ref5 : defaultPlaceholderText,
|
|
281
392
|
bracketPlaceholderText: bracketPlaceholderText,
|
|
282
393
|
emptyLinePlaceholder: emptyLinePlaceholder,
|
|
283
|
-
placeholderPrompts: (
|
|
394
|
+
placeholderPrompts: (_ref6 = (_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 && _ref6 !== void 0 ? _ref6 : placeholderPrompts,
|
|
284
395
|
typedAndDeleted: typedAndDeleted,
|
|
285
396
|
userHadTyped: userHadTyped,
|
|
286
397
|
intl: intl,
|
|
287
|
-
isPlaceholderHidden: isPlaceholderHidden
|
|
398
|
+
isPlaceholderHidden: isPlaceholderHidden,
|
|
399
|
+
withEmptyParagraph: withEmptyParagraph,
|
|
400
|
+
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
|
|
288
401
|
});
|
|
289
402
|
|
|
290
403
|
// Clear timeouts when hasPlaceholder becomes false
|
|
@@ -318,25 +431,67 @@ export function createPlugin(intl, defaultPlaceholderText, bracketPlaceholderTex
|
|
|
318
431
|
}
|
|
319
432
|
},
|
|
320
433
|
view: function view() {
|
|
434
|
+
var timeoutId;
|
|
435
|
+
function startEmptyParagraphTimeout(editorView) {
|
|
436
|
+
if (timeoutId) {
|
|
437
|
+
return;
|
|
438
|
+
}
|
|
439
|
+
timeoutId = setTimeout(function () {
|
|
440
|
+
timeoutId = undefined;
|
|
441
|
+
editorView.dispatch(editorView.state.tr.setMeta(pluginKey, {
|
|
442
|
+
showOnEmptyParagraph: true
|
|
443
|
+
}));
|
|
444
|
+
}, EMPTY_PARAGRAPH_TIMEOUT_DELAY);
|
|
445
|
+
}
|
|
446
|
+
function destroyEmptyParagraphTimeout() {
|
|
447
|
+
if (timeoutId) {
|
|
448
|
+
clearTimeout(timeoutId);
|
|
449
|
+
timeoutId = undefined;
|
|
450
|
+
}
|
|
451
|
+
}
|
|
321
452
|
return {
|
|
453
|
+
update: function update(editorView, prevState) {
|
|
454
|
+
if (fg('platform_editor_ai_aifc_patch_beta_2')) {
|
|
455
|
+
var prevPluginState = getPlaceholderState(prevState);
|
|
456
|
+
var newPluginState = getPlaceholderState(editorView.state);
|
|
457
|
+
|
|
458
|
+
// user start typing after move to an empty paragraph, clear timeout
|
|
459
|
+
if (!newPluginState.canShowOnEmptyParagraph && timeoutId) {
|
|
460
|
+
destroyEmptyParagraphTimeout();
|
|
461
|
+
}
|
|
462
|
+
// user move to an empty paragraph again, reset state to hide placeholder, and restart timeout
|
|
463
|
+
else if (prevPluginState.canShowOnEmptyParagraph && newPluginState.canShowOnEmptyParagraph && newPluginState.pos !== prevPluginState.pos) {
|
|
464
|
+
editorView.dispatch(editorView.state.tr.setMeta(pluginKey, {
|
|
465
|
+
showOnEmptyParagraph: false
|
|
466
|
+
}));
|
|
467
|
+
destroyEmptyParagraphTimeout();
|
|
468
|
+
startEmptyParagraphTimeout(editorView);
|
|
469
|
+
}
|
|
470
|
+
// user move to an empty paragraph (by click enter or move to an empty paragraph), start timeout
|
|
471
|
+
else if (!prevPluginState.canShowOnEmptyParagraph && newPluginState.canShowOnEmptyParagraph && !newPluginState.showOnEmptyParagraph && !timeoutId) {
|
|
472
|
+
startEmptyParagraphTimeout(editorView);
|
|
473
|
+
}
|
|
474
|
+
}
|
|
475
|
+
},
|
|
322
476
|
destroy: function destroy() {
|
|
323
477
|
clearAllTypewriterTimeouts();
|
|
478
|
+
destroyEmptyParagraphTimeout();
|
|
324
479
|
isDestroyed = true;
|
|
325
480
|
}
|
|
326
481
|
};
|
|
327
482
|
}
|
|
328
483
|
});
|
|
329
484
|
}
|
|
330
|
-
export var placeholderPlugin = function placeholderPlugin(
|
|
331
|
-
var options =
|
|
332
|
-
api =
|
|
485
|
+
export var placeholderPlugin = function placeholderPlugin(_ref7) {
|
|
486
|
+
var options = _ref7.config,
|
|
487
|
+
api = _ref7.api;
|
|
333
488
|
var currentPlaceholder = options === null || options === void 0 ? void 0 : options.placeholder;
|
|
334
489
|
return {
|
|
335
490
|
name: 'placeholder',
|
|
336
491
|
commands: {
|
|
337
492
|
setPlaceholder: function setPlaceholder(placeholderText) {
|
|
338
|
-
return function (
|
|
339
|
-
var tr =
|
|
493
|
+
return function (_ref8) {
|
|
494
|
+
var tr = _ref8.tr;
|
|
340
495
|
if (currentPlaceholder !== placeholderText) {
|
|
341
496
|
currentPlaceholder = placeholderText;
|
|
342
497
|
return tr.setMeta(pluginKey, {
|
|
@@ -347,16 +502,16 @@ export var placeholderPlugin = function placeholderPlugin(_ref5) {
|
|
|
347
502
|
};
|
|
348
503
|
},
|
|
349
504
|
setAnimatingPlaceholderPrompts: function setAnimatingPlaceholderPrompts(placeholderPrompts) {
|
|
350
|
-
return function (
|
|
351
|
-
var tr =
|
|
505
|
+
return function (_ref9) {
|
|
506
|
+
var tr = _ref9.tr;
|
|
352
507
|
return tr.setMeta(pluginKey, {
|
|
353
508
|
placeholderPrompts: placeholderPrompts
|
|
354
509
|
});
|
|
355
510
|
};
|
|
356
511
|
},
|
|
357
512
|
setPlaceholderHidden: function setPlaceholderHidden(isPlaceholderHidden) {
|
|
358
|
-
return function (
|
|
359
|
-
var tr =
|
|
513
|
+
return function (_ref0) {
|
|
514
|
+
var tr = _ref0.tr;
|
|
360
515
|
return tr.setMeta(pluginKey, {
|
|
361
516
|
isPlaceholderHidden: isPlaceholderHidden
|
|
362
517
|
});
|
|
@@ -366,9 +521,9 @@ export var placeholderPlugin = function placeholderPlugin(_ref5) {
|
|
|
366
521
|
pmPlugins: function pmPlugins() {
|
|
367
522
|
return [{
|
|
368
523
|
name: 'placeholder',
|
|
369
|
-
plugin: function plugin(
|
|
370
|
-
var getIntl =
|
|
371
|
-
return createPlugin(getIntl(), options && options.placeholder, options && options.placeholderBracketHint, options && options.emptyLinePlaceholder, options && options.placeholderPrompts, api);
|
|
524
|
+
plugin: function plugin(_ref1) {
|
|
525
|
+
var getIntl = _ref1.getIntl;
|
|
526
|
+
return createPlugin(getIntl(), options && options.placeholder, options && options.placeholderBracketHint, options && options.emptyLinePlaceholder, options && options.placeholderPrompts, options === null || options === void 0 ? void 0 : options.withEmptyParagraph, api);
|
|
372
527
|
}
|
|
373
528
|
}];
|
|
374
529
|
}
|
|
@@ -5,7 +5,8 @@ import type { EditorState } from '@atlaskit/editor-prosemirror/state';
|
|
|
5
5
|
import { PluginKey } from '@atlaskit/editor-prosemirror/state';
|
|
6
6
|
import { DecorationSet } from '@atlaskit/editor-prosemirror/view';
|
|
7
7
|
import type { PlaceholderPlugin } from './placeholderPluginType';
|
|
8
|
+
export declare const EMPTY_PARAGRAPH_TIMEOUT_DELAY = 2000;
|
|
8
9
|
export declare const pluginKey: PluginKey<any>;
|
|
9
10
|
export declare function createPlaceholderDecoration(editorState: EditorState, placeholderText: string, placeholderPrompts?: string[], activeTypewriterTimeouts?: (() => void)[], pos?: number, initialDelayWhenUserTypedAndDeleted?: number): DecorationSet;
|
|
10
|
-
export declare function createPlugin(intl: IntlShape, defaultPlaceholderText?: string, bracketPlaceholderText?: string, emptyLinePlaceholder?: string, placeholderPrompts?: string[], api?: ExtractInjectionAPI<PlaceholderPlugin>): SafePlugin | undefined;
|
|
11
|
+
export declare function createPlugin(intl: IntlShape, defaultPlaceholderText?: string, bracketPlaceholderText?: string, emptyLinePlaceholder?: string, placeholderPrompts?: string[], withEmptyParagraph?: boolean, api?: ExtractInjectionAPI<PlaceholderPlugin>): SafePlugin | undefined;
|
|
11
12
|
export declare const placeholderPlugin: PlaceholderPlugin;
|
|
@@ -5,7 +5,8 @@ import type { EditorState } from '@atlaskit/editor-prosemirror/state';
|
|
|
5
5
|
import { PluginKey } from '@atlaskit/editor-prosemirror/state';
|
|
6
6
|
import { DecorationSet } from '@atlaskit/editor-prosemirror/view';
|
|
7
7
|
import type { PlaceholderPlugin } from './placeholderPluginType';
|
|
8
|
+
export declare const EMPTY_PARAGRAPH_TIMEOUT_DELAY = 2000;
|
|
8
9
|
export declare const pluginKey: PluginKey<any>;
|
|
9
10
|
export declare function createPlaceholderDecoration(editorState: EditorState, placeholderText: string, placeholderPrompts?: string[], activeTypewriterTimeouts?: (() => void)[], pos?: number, initialDelayWhenUserTypedAndDeleted?: number): DecorationSet;
|
|
10
|
-
export declare function createPlugin(intl: IntlShape, defaultPlaceholderText?: string, bracketPlaceholderText?: string, emptyLinePlaceholder?: string, placeholderPrompts?: string[], api?: ExtractInjectionAPI<PlaceholderPlugin>): SafePlugin | undefined;
|
|
11
|
+
export declare function createPlugin(intl: IntlShape, defaultPlaceholderText?: string, bracketPlaceholderText?: string, emptyLinePlaceholder?: string, placeholderPrompts?: string[], withEmptyParagraph?: boolean, api?: ExtractInjectionAPI<PlaceholderPlugin>): SafePlugin | undefined;
|
|
11
12
|
export declare const placeholderPlugin: PlaceholderPlugin;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/editor-plugin-placeholder",
|
|
3
|
-
"version": "6.
|
|
3
|
+
"version": "6.3.0",
|
|
4
4
|
"description": "Placeholder plugin for @atlaskit/editor-core.",
|
|
5
5
|
"author": "Atlassian Pty Ltd",
|
|
6
6
|
"license": "Apache-2.0",
|
|
@@ -33,11 +33,11 @@
|
|
|
33
33
|
"@atlaskit/editor-plugin-type-ahead": "^6.5.0",
|
|
34
34
|
"@atlaskit/editor-prosemirror": "7.0.0",
|
|
35
35
|
"@atlaskit/platform-feature-flags": "^1.1.0",
|
|
36
|
-
"@atlaskit/tmp-editor-statsig": "^13.
|
|
36
|
+
"@atlaskit/tmp-editor-statsig": "^13.18.0",
|
|
37
37
|
"@babel/runtime": "^7.0.0"
|
|
38
38
|
},
|
|
39
39
|
"peerDependencies": {
|
|
40
|
-
"@atlaskit/editor-common": "^110.
|
|
40
|
+
"@atlaskit/editor-common": "^110.17.0",
|
|
41
41
|
"react": "^18.2.0",
|
|
42
42
|
"react-dom": "^18.2.0",
|
|
43
43
|
"react-intl-next": "npm:react-intl@^5.18.1"
|
|
@@ -48,6 +48,9 @@
|
|
|
48
48
|
"platform-feature-flags": {
|
|
49
49
|
"platform_editor_ai_aifc_patch_beta": {
|
|
50
50
|
"type": "boolean"
|
|
51
|
+
},
|
|
52
|
+
"platform_editor_ai_aifc_patch_beta_2": {
|
|
53
|
+
"type": "boolean"
|
|
51
54
|
}
|
|
52
55
|
},
|
|
53
56
|
"techstack": {
|