@atlaskit/editor-plugin-placeholder 6.1.1 → 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 +22 -1
- package/dist/cjs/placeholderPlugin.js +233 -48
- package/dist/es2019/placeholderPlugin.js +204 -21
- package/dist/esm/placeholderPlugin.js +232 -49
- package/dist/types/placeholderPlugin.d.ts +2 -1
- package/dist/types/placeholderPluginType.d.ts +2 -0
- package/dist/types-ts4.5/placeholderPlugin.d.ts +2 -1
- package/dist/types-ts4.5/placeholderPluginType.d.ts +2 -0
- package/package.json +13 -5
|
@@ -1,9 +1,14 @@
|
|
|
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; }
|
|
1
4
|
import { placeholderTextMessages as messages } from '@atlaskit/editor-common/messages';
|
|
2
5
|
import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
|
|
3
|
-
import { bracketTyped, browser, isEmptyDocument, isEmptyParagraph } from '@atlaskit/editor-common/utils';
|
|
6
|
+
import { bracketTyped, browser, hasDocAsParent, isEmptyDocument, isEmptyParagraph } from '@atlaskit/editor-common/utils';
|
|
4
7
|
import { PluginKey } from '@atlaskit/editor-prosemirror/state';
|
|
5
8
|
import { findParentNode } from '@atlaskit/editor-prosemirror/utils';
|
|
6
9
|
import { Decoration, DecorationSet } from '@atlaskit/editor-prosemirror/view';
|
|
10
|
+
import { fg } from '@atlaskit/platform-feature-flags';
|
|
11
|
+
import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
|
|
7
12
|
import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
|
|
8
13
|
// Typewriter animation timing constants
|
|
9
14
|
var TYPEWRITER_TYPE_DELAY = 50; // Delay between typing each character
|
|
@@ -12,6 +17,8 @@ var TYPEWRITER_ERASE_DELAY = 40; // Delay between erasing each character
|
|
|
12
17
|
var TYPEWRITER_CYCLE_DELAY = 500; // Delay before starting next cycle
|
|
13
18
|
var TYPEWRITER_TYPED_AND_DELETED_DELAY = 1500; // Delay before starting animation after user typed and deleted
|
|
14
19
|
|
|
20
|
+
export var EMPTY_PARAGRAPH_TIMEOUT_DELAY = 2000; // Delay before showing placeholder on empty paragraph
|
|
21
|
+
|
|
15
22
|
export var pluginKey = new PluginKey('placeholderPlugin');
|
|
16
23
|
var placeholderTestId = 'placeholder-test-id';
|
|
17
24
|
function getPlaceholderState(editorState) {
|
|
@@ -19,6 +26,7 @@ function getPlaceholderState(editorState) {
|
|
|
19
26
|
}
|
|
20
27
|
var nodeTypesWithLongPlaceholderText = ['expand', 'panel'];
|
|
21
28
|
var nodeTypesWithShortPlaceholderText = ['tableCell', 'tableHeader'];
|
|
29
|
+
var nodeTypesWithSyncBlockPlaceholderText = ['bodiedSyncBlock'];
|
|
22
30
|
var cycleThroughPlaceholderPrompts = function cycleThroughPlaceholderPrompts(placeholderPrompts, activeTypewriterTimeouts, placeholderNodeWithText) {
|
|
23
31
|
var initialDelayWhenUserTypedAndDeleted = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 0;
|
|
24
32
|
var currentPromptIndex = 0;
|
|
@@ -114,56 +122,131 @@ export function createPlaceholderDecoration(editorState, placeholderText, placeh
|
|
|
114
122
|
key: "placeholder ".concat(placeholderText)
|
|
115
123
|
})]);
|
|
116
124
|
}
|
|
117
|
-
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;
|
|
118
133
|
return {
|
|
119
134
|
hasPlaceholder: true,
|
|
120
135
|
placeholderText: placeholderText,
|
|
121
136
|
placeholderPrompts: placeholderPrompts,
|
|
122
137
|
pos: pos ? pos : 1,
|
|
123
138
|
typedAndDeleted: typedAndDeleted,
|
|
124
|
-
userHadTyped: userHadTyped
|
|
139
|
+
userHadTyped: userHadTyped,
|
|
140
|
+
canShowOnEmptyParagraph: canShowOnEmptyParagraph,
|
|
141
|
+
showOnEmptyParagraph: showOnEmptyParagraph
|
|
125
142
|
};
|
|
126
143
|
}
|
|
127
|
-
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;
|
|
128
151
|
return {
|
|
129
152
|
hasPlaceholder: false,
|
|
130
153
|
placeholderText: placeholderText,
|
|
131
154
|
placeholderPrompts: placeholderPrompts,
|
|
132
155
|
userHadTyped: userHadTyped,
|
|
133
|
-
typedAndDeleted: false
|
|
156
|
+
typedAndDeleted: false,
|
|
157
|
+
canShowOnEmptyParagraph: canShowOnEmptyParagraph,
|
|
158
|
+
showOnEmptyParagraph: showOnEmptyParagraph,
|
|
159
|
+
pos: pos
|
|
134
160
|
};
|
|
135
161
|
};
|
|
136
|
-
function createPlaceHolderStateFrom(
|
|
137
|
-
var
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
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;
|
|
177
|
+
if (isPlaceholderHidden && fg('platform_editor_ai_aifc_patch_beta')) {
|
|
178
|
+
return _objectSpread(_objectSpread({}, emptyPlaceholder({
|
|
179
|
+
placeholderText: defaultPlaceholderText,
|
|
180
|
+
placeholderPrompts: placeholderPrompts,
|
|
181
|
+
userHadTyped: userHadTyped
|
|
182
|
+
})), {}, {
|
|
183
|
+
isPlaceholderHidden: isPlaceholderHidden
|
|
184
|
+
});
|
|
185
|
+
}
|
|
147
186
|
if (isTypeAheadOpen !== null && isTypeAheadOpen !== void 0 && isTypeAheadOpen(editorState)) {
|
|
148
|
-
return emptyPlaceholder(
|
|
187
|
+
return emptyPlaceholder({
|
|
188
|
+
placeholderText: defaultPlaceholderText,
|
|
189
|
+
placeholderPrompts: placeholderPrompts,
|
|
190
|
+
userHadTyped: userHadTyped
|
|
191
|
+
});
|
|
149
192
|
}
|
|
150
193
|
if ((defaultPlaceholderText || placeholderPrompts) && isEmptyDocument(editorState.doc)) {
|
|
151
|
-
return setPlaceHolderState(
|
|
194
|
+
return setPlaceHolderState({
|
|
195
|
+
placeholderText: defaultPlaceholderText,
|
|
196
|
+
pos: 1,
|
|
197
|
+
placeholderPrompts: placeholderPrompts,
|
|
198
|
+
typedAndDeleted: typedAndDeleted,
|
|
199
|
+
userHadTyped: userHadTyped
|
|
200
|
+
});
|
|
152
201
|
}
|
|
153
|
-
if (
|
|
154
|
-
var _parentNode$firstChil, _parentNode$firstChil2;
|
|
202
|
+
if (fg('platform_editor_ai_aifc_patch_beta_2')) {
|
|
155
203
|
var _editorState$selectio = editorState.selection,
|
|
156
|
-
|
|
204
|
+
from = _editorState$selectio.from,
|
|
205
|
+
to = _editorState$selectio.to,
|
|
157
206
|
$to = _editorState$selectio.$to;
|
|
158
|
-
if (
|
|
159
|
-
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
|
+
});
|
|
160
237
|
}
|
|
161
238
|
var parentNode = $from.node($from.depth - 1);
|
|
162
239
|
var parentType = parentNode === null || parentNode === void 0 ? void 0 : parentNode.type.name;
|
|
163
240
|
if (emptyLinePlaceholder && parentType === 'doc') {
|
|
164
241
|
var isEmptyLine = isEmptyParagraph($from.parent);
|
|
165
242
|
if (isEmptyLine) {
|
|
166
|
-
return setPlaceHolderState(
|
|
243
|
+
return setPlaceHolderState({
|
|
244
|
+
placeholderText: emptyLinePlaceholder,
|
|
245
|
+
pos: $from.pos,
|
|
246
|
+
placeholderPrompts: placeholderPrompts,
|
|
247
|
+
typedAndDeleted: typedAndDeleted,
|
|
248
|
+
userHadTyped: userHadTyped
|
|
249
|
+
});
|
|
167
250
|
}
|
|
168
251
|
}
|
|
169
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';
|
|
@@ -173,30 +256,69 @@ function createPlaceHolderStateFrom(_ref) {
|
|
|
173
256
|
return node.type === editorState.schema.nodes.table;
|
|
174
257
|
})(editorState.selection);
|
|
175
258
|
if (!table) {
|
|
176
|
-
return emptyPlaceholder(
|
|
259
|
+
return emptyPlaceholder({
|
|
260
|
+
placeholderText: defaultPlaceholderText,
|
|
261
|
+
placeholderPrompts: placeholderPrompts,
|
|
262
|
+
userHadTyped: userHadTyped
|
|
263
|
+
});
|
|
177
264
|
}
|
|
178
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;
|
|
179
266
|
if (isFirstCell) {
|
|
180
|
-
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
|
+
});
|
|
181
274
|
}
|
|
182
275
|
}
|
|
183
276
|
if (nodeTypesWithLongPlaceholderText.includes(parentType) && isEmptyNode) {
|
|
184
|
-
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
|
+
});
|
|
284
|
+
}
|
|
285
|
+
if (nodeTypesWithSyncBlockPlaceholderText.includes(parentType) && isEmptyNode && expValEquals('platform_synced_block', 'isEnabled', true)) {
|
|
286
|
+
return setPlaceHolderState({
|
|
287
|
+
placeholderText: intl.formatMessage(messages.syncBlockPlaceholderText),
|
|
288
|
+
pos: $from.pos,
|
|
289
|
+
placeholderPrompts: placeholderPrompts,
|
|
290
|
+
typedAndDeleted: typedAndDeleted,
|
|
291
|
+
userHadTyped: userHadTyped
|
|
292
|
+
});
|
|
185
293
|
}
|
|
186
|
-
return emptyPlaceholder(
|
|
294
|
+
return emptyPlaceholder({
|
|
295
|
+
placeholderText: defaultPlaceholderText,
|
|
296
|
+
placeholderPrompts: placeholderPrompts,
|
|
297
|
+
userHadTyped: userHadTyped
|
|
298
|
+
});
|
|
187
299
|
}
|
|
188
300
|
if (bracketPlaceholderText && bracketTyped(editorState) && isEditorFocused) {
|
|
189
301
|
var _$from = editorState.selection.$from;
|
|
190
302
|
// Space is to account for positioning of the bracket
|
|
191
303
|
var bracketHint = ' ' + bracketPlaceholderText;
|
|
192
|
-
return setPlaceHolderState(
|
|
304
|
+
return setPlaceHolderState({
|
|
305
|
+
placeholderText: bracketHint,
|
|
306
|
+
pos: _$from.pos - 1,
|
|
307
|
+
placeholderPrompts: placeholderPrompts,
|
|
308
|
+
typedAndDeleted: typedAndDeleted,
|
|
309
|
+
userHadTyped: userHadTyped
|
|
310
|
+
});
|
|
193
311
|
}
|
|
194
|
-
return emptyPlaceholder(
|
|
312
|
+
return emptyPlaceholder({
|
|
313
|
+
placeholderText: defaultPlaceholderText,
|
|
314
|
+
placeholderPrompts: placeholderPrompts,
|
|
315
|
+
userHadTyped: userHadTyped
|
|
316
|
+
});
|
|
195
317
|
}
|
|
196
|
-
function calculateUserInteractionState(
|
|
197
|
-
var placeholderState =
|
|
198
|
-
oldEditorState =
|
|
199
|
-
newEditorState =
|
|
318
|
+
function calculateUserInteractionState(_ref4) {
|
|
319
|
+
var placeholderState = _ref4.placeholderState,
|
|
320
|
+
oldEditorState = _ref4.oldEditorState,
|
|
321
|
+
newEditorState = _ref4.newEditorState;
|
|
200
322
|
var wasEmpty = oldEditorState ? isEmptyDocument(oldEditorState.doc) : true;
|
|
201
323
|
var isEmpty = isEmptyDocument(newEditorState.doc);
|
|
202
324
|
var hasEverTyped = Boolean(placeholderState === null || placeholderState === void 0 ? void 0 : placeholderState.userHadTyped) ||
|
|
@@ -213,7 +335,7 @@ function calculateUserInteractionState(_ref2) {
|
|
|
213
335
|
typedAndDeleted: isInTypedAndDeletedState
|
|
214
336
|
};
|
|
215
337
|
}
|
|
216
|
-
export function createPlugin(intl, defaultPlaceholderText, bracketPlaceholderText, emptyLinePlaceholder, placeholderPrompts, api) {
|
|
338
|
+
export function createPlugin(intl, defaultPlaceholderText, bracketPlaceholderText, emptyLinePlaceholder, placeholderPrompts, withEmptyParagraph, api) {
|
|
217
339
|
if (!defaultPlaceholderText && !placeholderPrompts && !bracketPlaceholderText) {
|
|
218
340
|
return;
|
|
219
341
|
}
|
|
@@ -231,6 +353,7 @@ export function createPlugin(intl, defaultPlaceholderText, bracketPlaceholderTex
|
|
|
231
353
|
init: function init(_, state) {
|
|
232
354
|
var _api$focus, _api$typeAhead;
|
|
233
355
|
return createPlaceHolderStateFrom({
|
|
356
|
+
isInitial: true,
|
|
234
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),
|
|
235
358
|
editorState: state,
|
|
236
359
|
isTypeAheadOpen: api === null || api === void 0 || (_api$typeAhead = api.typeAhead) === null || _api$typeAhead === void 0 ? void 0 : _api$typeAhead.actions.isOpen,
|
|
@@ -244,7 +367,7 @@ export function createPlugin(intl, defaultPlaceholderText, bracketPlaceholderTex
|
|
|
244
367
|
});
|
|
245
368
|
},
|
|
246
369
|
apply: function apply(tr, placeholderState, _oldEditorState, newEditorState) {
|
|
247
|
-
var _api$focus2, _api$typeAhead2,
|
|
370
|
+
var _api$focus2, _placeholderState$isP, _api$typeAhead2, _ref5, _meta$placeholderText, _ref6, _meta$placeholderProm, _meta$showOnEmptyPara;
|
|
248
371
|
var meta = tr.getMeta(pluginKey);
|
|
249
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);
|
|
250
373
|
var _calculateUserInterac = calculateUserInteractionState({
|
|
@@ -254,17 +377,27 @@ export function createPlugin(intl, defaultPlaceholderText, bracketPlaceholderTex
|
|
|
254
377
|
}),
|
|
255
378
|
userHadTyped = _calculateUserInterac.userHadTyped,
|
|
256
379
|
typedAndDeleted = _calculateUserInterac.typedAndDeleted;
|
|
380
|
+
var isPlaceholderHidden = (_placeholderState$isP = placeholderState === null || placeholderState === void 0 ? void 0 : placeholderState.isPlaceholderHidden) !== null && _placeholderState$isP !== void 0 ? _placeholderState$isP : false;
|
|
381
|
+
if ((meta === null || meta === void 0 ? void 0 : meta.isPlaceholderHidden) !== undefined && fg('platform_editor_ai_aifc_patch_beta')) {
|
|
382
|
+
isPlaceholderHidden = meta.isPlaceholderHidden;
|
|
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
|
+
}
|
|
257
387
|
var newPlaceholderState = createPlaceHolderStateFrom({
|
|
258
388
|
isEditorFocused: isEditorFocused,
|
|
259
389
|
editorState: newEditorState,
|
|
260
390
|
isTypeAheadOpen: api === null || api === void 0 || (_api$typeAhead2 = api.typeAhead) === null || _api$typeAhead2 === void 0 ? void 0 : _api$typeAhead2.actions.isOpen,
|
|
261
|
-
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,
|
|
262
392
|
bracketPlaceholderText: bracketPlaceholderText,
|
|
263
393
|
emptyLinePlaceholder: emptyLinePlaceholder,
|
|
264
|
-
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,
|
|
265
395
|
typedAndDeleted: typedAndDeleted,
|
|
266
396
|
userHadTyped: userHadTyped,
|
|
267
|
-
intl: intl
|
|
397
|
+
intl: intl,
|
|
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
|
|
268
401
|
});
|
|
269
402
|
|
|
270
403
|
// Clear timeouts when hasPlaceholder becomes false
|
|
@@ -298,25 +431,67 @@ export function createPlugin(intl, defaultPlaceholderText, bracketPlaceholderTex
|
|
|
298
431
|
}
|
|
299
432
|
},
|
|
300
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
|
+
}
|
|
301
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
|
+
},
|
|
302
476
|
destroy: function destroy() {
|
|
303
477
|
clearAllTypewriterTimeouts();
|
|
478
|
+
destroyEmptyParagraphTimeout();
|
|
304
479
|
isDestroyed = true;
|
|
305
480
|
}
|
|
306
481
|
};
|
|
307
482
|
}
|
|
308
483
|
});
|
|
309
484
|
}
|
|
310
|
-
export var placeholderPlugin = function placeholderPlugin(
|
|
311
|
-
var options =
|
|
312
|
-
api =
|
|
485
|
+
export var placeholderPlugin = function placeholderPlugin(_ref7) {
|
|
486
|
+
var options = _ref7.config,
|
|
487
|
+
api = _ref7.api;
|
|
313
488
|
var currentPlaceholder = options === null || options === void 0 ? void 0 : options.placeholder;
|
|
314
489
|
return {
|
|
315
490
|
name: 'placeholder',
|
|
316
491
|
commands: {
|
|
317
492
|
setPlaceholder: function setPlaceholder(placeholderText) {
|
|
318
|
-
return function (
|
|
319
|
-
var tr =
|
|
493
|
+
return function (_ref8) {
|
|
494
|
+
var tr = _ref8.tr;
|
|
320
495
|
if (currentPlaceholder !== placeholderText) {
|
|
321
496
|
currentPlaceholder = placeholderText;
|
|
322
497
|
return tr.setMeta(pluginKey, {
|
|
@@ -327,20 +502,28 @@ export var placeholderPlugin = function placeholderPlugin(_ref5) {
|
|
|
327
502
|
};
|
|
328
503
|
},
|
|
329
504
|
setAnimatingPlaceholderPrompts: function setAnimatingPlaceholderPrompts(placeholderPrompts) {
|
|
330
|
-
return function (
|
|
331
|
-
var tr =
|
|
505
|
+
return function (_ref9) {
|
|
506
|
+
var tr = _ref9.tr;
|
|
332
507
|
return tr.setMeta(pluginKey, {
|
|
333
508
|
placeholderPrompts: placeholderPrompts
|
|
334
509
|
});
|
|
335
510
|
};
|
|
511
|
+
},
|
|
512
|
+
setPlaceholderHidden: function setPlaceholderHidden(isPlaceholderHidden) {
|
|
513
|
+
return function (_ref0) {
|
|
514
|
+
var tr = _ref0.tr;
|
|
515
|
+
return tr.setMeta(pluginKey, {
|
|
516
|
+
isPlaceholderHidden: isPlaceholderHidden
|
|
517
|
+
});
|
|
518
|
+
};
|
|
336
519
|
}
|
|
337
520
|
},
|
|
338
521
|
pmPlugins: function pmPlugins() {
|
|
339
522
|
return [{
|
|
340
523
|
name: 'placeholder',
|
|
341
|
-
plugin: function plugin(
|
|
342
|
-
var getIntl =
|
|
343
|
-
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);
|
|
344
527
|
}
|
|
345
528
|
}];
|
|
346
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;
|
|
@@ -8,11 +8,13 @@ export interface PlaceholderPluginOptions {
|
|
|
8
8
|
placeholder?: string;
|
|
9
9
|
placeholderBracketHint?: string;
|
|
10
10
|
placeholderPrompts?: string[];
|
|
11
|
+
withEmptyParagraph?: boolean;
|
|
11
12
|
}
|
|
12
13
|
export type PlaceholderPlugin = NextEditorPlugin<'placeholder', {
|
|
13
14
|
commands: {
|
|
14
15
|
setAnimatingPlaceholderPrompts: (placeholderPrompts: string[]) => EditorCommand;
|
|
15
16
|
setPlaceholder: (placeholder: string) => EditorCommand;
|
|
17
|
+
setPlaceholderHidden: (isPlaceholderHidden: boolean) => EditorCommand;
|
|
16
18
|
};
|
|
17
19
|
dependencies: [FocusPlugin, CompositionPlugin, TypeAheadPlugin, OptionalPlugin<ShowDiffPlugin>];
|
|
18
20
|
pluginConfiguration: PlaceholderPluginOptions | undefined;
|
|
@@ -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;
|
|
@@ -8,11 +8,13 @@ export interface PlaceholderPluginOptions {
|
|
|
8
8
|
placeholder?: string;
|
|
9
9
|
placeholderBracketHint?: string;
|
|
10
10
|
placeholderPrompts?: string[];
|
|
11
|
+
withEmptyParagraph?: boolean;
|
|
11
12
|
}
|
|
12
13
|
export type PlaceholderPlugin = NextEditorPlugin<'placeholder', {
|
|
13
14
|
commands: {
|
|
14
15
|
setAnimatingPlaceholderPrompts: (placeholderPrompts: string[]) => EditorCommand;
|
|
15
16
|
setPlaceholder: (placeholder: string) => EditorCommand;
|
|
17
|
+
setPlaceholderHidden: (isPlaceholderHidden: boolean) => EditorCommand;
|
|
16
18
|
};
|
|
17
19
|
dependencies: [
|
|
18
20
|
FocusPlugin,
|
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",
|
|
@@ -29,15 +29,15 @@
|
|
|
29
29
|
"dependencies": {
|
|
30
30
|
"@atlaskit/editor-plugin-composition": "^5.0.0",
|
|
31
31
|
"@atlaskit/editor-plugin-focus": "^5.0.0",
|
|
32
|
-
"@atlaskit/editor-plugin-show-diff": "^3.
|
|
33
|
-
"@atlaskit/editor-plugin-type-ahead": "^6.
|
|
32
|
+
"@atlaskit/editor-plugin-show-diff": "^3.1.0",
|
|
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"
|
|
@@ -45,6 +45,14 @@
|
|
|
45
45
|
"devDependencies": {
|
|
46
46
|
"@testing-library/react": "^13.4.0"
|
|
47
47
|
},
|
|
48
|
+
"platform-feature-flags": {
|
|
49
|
+
"platform_editor_ai_aifc_patch_beta": {
|
|
50
|
+
"type": "boolean"
|
|
51
|
+
},
|
|
52
|
+
"platform_editor_ai_aifc_patch_beta_2": {
|
|
53
|
+
"type": "boolean"
|
|
54
|
+
}
|
|
55
|
+
},
|
|
48
56
|
"techstack": {
|
|
49
57
|
"@atlassian/frontend": {
|
|
50
58
|
"import-structure": [
|