@atlaskit/editor-plugin-placeholder 2.0.9 → 2.0.11

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.
Files changed (7) hide show
  1. package/CHANGELOG.md +18 -0
  2. package/dist/cjs/placeholderPlugin.js +62 -18
  3. package/dist/es2019/placeholderPlugin.js +56 -12
  4. package/dist/esm/placeholderPlugin.js +62 -18
  5. package/dist/types/placeholderPlugin.d.ts +2 -1
  6. package/dist/types-ts4.5/placeholderPlugin.d.ts +2 -1
  7. package/package.json +12 -5
package/CHANGELOG.md CHANGED
@@ -1,5 +1,23 @@
1
1
  # @atlaskit/editor-plugin-placeholder
2
2
 
3
+ ## 2.0.11
4
+
5
+ ### Patch Changes
6
+
7
+ - [#136973](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/136973)
8
+ [`d24797988a39c`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/d24797988a39c) -
9
+ [ux] ED-27349 Remove empty line placeholder and only show empty node placeholder in first table
10
+ cell when it is empty
11
+
12
+ ## 2.0.10
13
+
14
+ ### Patch Changes
15
+
16
+ - [#135586](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/135586)
17
+ [`3aeba66081612`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/3aeba66081612) -
18
+ ED-26593 Add missing i18n for editor control
19
+ - Updated dependencies
20
+
3
21
  ## 2.0.9
4
22
 
5
23
  ### Patch Changes
package/dist/cjs/placeholderPlugin.js CHANGED
@@ -6,20 +6,19 @@ Object.defineProperty(exports, "__esModule", {
6
6
  exports.createPlaceholderDecoration = createPlaceholderDecoration;
7
7
  exports.createPlugin = createPlugin;
8
8
  exports.pluginKey = exports.placeholderTestId = exports.placeholderPlugin = void 0;
9
+ var _messages = require("@atlaskit/editor-common/messages");
9
10
  var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
10
11
  var _utils = require("@atlaskit/editor-common/utils");
11
12
  var _state = require("@atlaskit/editor-prosemirror/state");
13
+ var _utils2 = require("@atlaskit/editor-prosemirror/utils");
12
14
  var _view = require("@atlaskit/editor-prosemirror/view");
15
+ var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
13
16
  var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
14
17
  var pluginKey = exports.pluginKey = new _state.PluginKey('placeholderPlugin');
15
18
  function getPlaceholderState(editorState) {
16
19
  return pluginKey.getState(editorState);
17
20
  }
18
21
  var placeholderTestId = exports.placeholderTestId = 'placeholder-test-id';
19
-
20
- // TODO: ED-26962 - Use i18n for new placeholders
21
- var SHORT_NODE_PLACEHOLDER_TEXT = '/ to insert';
22
- var NODE_PLACEHOLDER_TEXT = 'Type / to insert elements';
23
22
  var nodeTypesWithLongPlaceholderText = ['expand', 'panel'];
24
23
  var nodeTypesWithShortPlaceholderText = ['tableCell', 'tableHeader'];
25
24
  function createPlaceholderDecoration(editorState, placeholderText) {
@@ -74,7 +73,14 @@ var emptyPlaceholder = function emptyPlaceholder(placeholderText) {
74
73
  placeholderText: placeholderText
75
74
  };
76
75
  };
77
- function createPlaceHolderStateFrom(isEditorFocused, editorState, isTypeAheadOpen, defaultPlaceholderText, bracketPlaceholderText, emptyLinePlaceholder) {
76
+ function createPlaceHolderStateFrom(_ref) {
77
+ var isEditorFocused = _ref.isEditorFocused,
78
+ editorState = _ref.editorState,
79
+ isTypeAheadOpen = _ref.isTypeAheadOpen,
80
+ defaultPlaceholderText = _ref.defaultPlaceholderText,
81
+ intl = _ref.intl,
82
+ bracketPlaceholderText = _ref.bracketPlaceholderText,
83
+ emptyLinePlaceholder = _ref.emptyLinePlaceholder;
78
84
  if (isTypeAheadOpen !== null && isTypeAheadOpen !== void 0 && isTypeAheadOpen(editorState)) {
79
85
  return emptyPlaceholder(defaultPlaceholderText);
80
86
  }
@@ -99,10 +105,23 @@ function createPlaceHolderStateFrom(isEditorFocused, editorState, isTypeAheadOpe
99
105
  }
100
106
  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';
101
107
  if (nodeTypesWithShortPlaceholderText.includes(parentType) && isEmptyNode) {
102
- return setPlaceHolderState(SHORT_NODE_PLACEHOLDER_TEXT, $from.pos);
108
+ var _table$node$firstChil;
109
+ if (!(0, _platformFeatureFlags.fg)('platform_editor_controls_patch_3')) {
110
+ return setPlaceHolderState(intl.formatMessage(_messages.placeholderTextMessages.shortEmptyNodePlaceholderText), $from.pos);
111
+ }
112
+ var table = (0, _utils2.findParentNode)(function (node) {
113
+ return node.type === editorState.schema.nodes.table;
114
+ })(editorState.selection);
115
+ if (!table) {
116
+ return emptyPlaceholder(defaultPlaceholderText);
117
+ }
118
+ 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;
119
+ if (isFirstCell) {
120
+ return setPlaceHolderState(intl.formatMessage(_messages.placeholderTextMessages.shortEmptyNodePlaceholderText), $from.pos);
121
+ }
103
122
  }
104
123
  if (nodeTypesWithLongPlaceholderText.includes(parentType) && isEmptyNode) {
105
- return setPlaceHolderState(NODE_PLACEHOLDER_TEXT, $from.pos);
124
+ return setPlaceHolderState(intl.formatMessage(_messages.placeholderTextMessages.longEmptyNodePlaceholderText), $from.pos);
106
125
  }
107
126
  return emptyPlaceholder(defaultPlaceholderText);
108
127
  }
@@ -114,7 +133,7 @@ function createPlaceHolderStateFrom(isEditorFocused, editorState, isTypeAheadOpe
114
133
  }
115
134
  return emptyPlaceholder(defaultPlaceholderText);
116
135
  }
117
- function createPlugin(defaultPlaceholderText, bracketPlaceholderText, emptyLinePlaceholder, api) {
136
+ function createPlugin(intl, defaultPlaceholderText, bracketPlaceholderText, emptyLinePlaceholder, api) {
118
137
  if (!defaultPlaceholderText && !bracketPlaceholderText) {
119
138
  return;
120
139
  }
@@ -123,7 +142,15 @@ function createPlugin(defaultPlaceholderText, bracketPlaceholderText, emptyLineP
123
142
  state: {
124
143
  init: function init(_, state) {
125
144
  var _api$focus, _api$typeAhead;
126
- return createPlaceHolderStateFrom(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), state, api === null || api === void 0 || (_api$typeAhead = api.typeAhead) === null || _api$typeAhead === void 0 ? void 0 : _api$typeAhead.actions.isOpen, defaultPlaceholderText, bracketPlaceholderText, emptyLinePlaceholder);
145
+ return createPlaceHolderStateFrom({
146
+ 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),
147
+ editorState: state,
148
+ isTypeAheadOpen: api === null || api === void 0 || (_api$typeAhead = api.typeAhead) === null || _api$typeAhead === void 0 ? void 0 : _api$typeAhead.actions.isOpen,
149
+ defaultPlaceholderText: defaultPlaceholderText,
150
+ bracketPlaceholderText: bracketPlaceholderText,
151
+ emptyLinePlaceholder: emptyLinePlaceholder,
152
+ intl: intl
153
+ });
127
154
  },
128
155
  apply: function apply(tr, placeholderState, _oldEditorState, newEditorState) {
129
156
  var _api$focus2, _api$typeAhead3, _placeholderState$pla;
@@ -131,9 +158,25 @@ function createPlugin(defaultPlaceholderText, bracketPlaceholderText, emptyLineP
131
158
  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);
132
159
  if ((meta === null || meta === void 0 ? void 0 : meta.placeholderText) !== undefined) {
133
160
  var _api$typeAhead2;
134
- return createPlaceHolderStateFrom(isEditorFocused, newEditorState, api === null || api === void 0 || (_api$typeAhead2 = api.typeAhead) === null || _api$typeAhead2 === void 0 ? void 0 : _api$typeAhead2.actions.isOpen, meta.placeholderText, bracketPlaceholderText, emptyLinePlaceholder);
161
+ return createPlaceHolderStateFrom({
162
+ isEditorFocused: isEditorFocused,
163
+ editorState: newEditorState,
164
+ isTypeAheadOpen: api === null || api === void 0 || (_api$typeAhead2 = api.typeAhead) === null || _api$typeAhead2 === void 0 ? void 0 : _api$typeAhead2.actions.isOpen,
165
+ defaultPlaceholderText: meta.placeholderText,
166
+ bracketPlaceholderText: bracketPlaceholderText,
167
+ emptyLinePlaceholder: emptyLinePlaceholder,
168
+ intl: intl
169
+ });
135
170
  }
136
- return createPlaceHolderStateFrom(isEditorFocused, newEditorState, api === null || api === void 0 || (_api$typeAhead3 = api.typeAhead) === null || _api$typeAhead3 === void 0 ? void 0 : _api$typeAhead3.actions.isOpen, (_placeholderState$pla = placeholderState === null || placeholderState === void 0 ? void 0 : placeholderState.placeholderText) !== null && _placeholderState$pla !== void 0 ? _placeholderState$pla : defaultPlaceholderText, bracketPlaceholderText, emptyLinePlaceholder);
171
+ return createPlaceHolderStateFrom({
172
+ isEditorFocused: isEditorFocused,
173
+ editorState: newEditorState,
174
+ isTypeAheadOpen: api === null || api === void 0 || (_api$typeAhead3 = api.typeAhead) === null || _api$typeAhead3 === void 0 ? void 0 : _api$typeAhead3.actions.isOpen,
175
+ defaultPlaceholderText: (_placeholderState$pla = placeholderState === null || placeholderState === void 0 ? void 0 : placeholderState.placeholderText) !== null && _placeholderState$pla !== void 0 ? _placeholderState$pla : defaultPlaceholderText,
176
+ bracketPlaceholderText: bracketPlaceholderText,
177
+ emptyLinePlaceholder: emptyLinePlaceholder,
178
+ intl: intl
179
+ });
137
180
  }
138
181
  },
139
182
  props: {
@@ -152,16 +195,16 @@ function createPlugin(defaultPlaceholderText, bracketPlaceholderText, emptyLineP
152
195
  }
153
196
  });
154
197
  }
155
- var placeholderPlugin = exports.placeholderPlugin = function placeholderPlugin(_ref) {
156
- var options = _ref.config,
157
- api = _ref.api;
198
+ var placeholderPlugin = exports.placeholderPlugin = function placeholderPlugin(_ref2) {
199
+ var options = _ref2.config,
200
+ api = _ref2.api;
158
201
  var currentPlaceholder = options === null || options === void 0 ? void 0 : options.placeholder;
159
202
  return {
160
203
  name: 'placeholder',
161
204
  commands: {
162
205
  setPlaceholder: function setPlaceholder(placeholderText) {
163
- return function (_ref2) {
164
- var tr = _ref2.tr;
206
+ return function (_ref3) {
207
+ var tr = _ref3.tr;
165
208
  if (currentPlaceholder !== placeholderText) {
166
209
  currentPlaceholder = placeholderText;
167
210
  return tr.setMeta(pluginKey, {
@@ -175,8 +218,9 @@ var placeholderPlugin = exports.placeholderPlugin = function placeholderPlugin(_
175
218
  pmPlugins: function pmPlugins() {
176
219
  return [{
177
220
  name: 'placeholder',
178
- plugin: function plugin() {
179
- return createPlugin(options && options.placeholder, options && options.placeholderBracketHint, options && options.emptyLinePlaceholder, api);
221
+ plugin: function plugin(_ref4) {
222
+ var getIntl = _ref4.getIntl;
223
+ return createPlugin(getIntl(), options && options.placeholder, options && options.placeholderBracketHint, options && options.emptyLinePlaceholder, api);
180
224
  }
181
225
  }];
182
226
  }
package/dist/es2019/placeholderPlugin.js CHANGED
@@ -1,17 +1,16 @@
1
+ import { placeholderTextMessages as messages } from '@atlaskit/editor-common/messages';
1
2
  import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
2
3
  import { bracketTyped, browser, isEmptyDocument, isEmptyParagraph } from '@atlaskit/editor-common/utils';
3
4
  import { PluginKey } from '@atlaskit/editor-prosemirror/state';
5
+ import { findParentNode } from '@atlaskit/editor-prosemirror/utils';
4
6
  import { Decoration, DecorationSet } from '@atlaskit/editor-prosemirror/view';
7
+ import { fg } from '@atlaskit/platform-feature-flags';
5
8
  import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
6
9
  export const pluginKey = new PluginKey('placeholderPlugin');
7
10
  function getPlaceholderState(editorState) {
8
11
  return pluginKey.getState(editorState);
9
12
  }
10
13
  export const placeholderTestId = 'placeholder-test-id';
11
-
12
- // TODO: ED-26962 - Use i18n for new placeholders
13
- const SHORT_NODE_PLACEHOLDER_TEXT = '/ to insert';
14
- const NODE_PLACEHOLDER_TEXT = 'Type / to insert elements';
15
14
  const nodeTypesWithLongPlaceholderText = ['expand', 'panel'];
16
15
  const nodeTypesWithShortPlaceholderText = ['tableCell', 'tableHeader'];
17
16
  export function createPlaceholderDecoration(editorState, placeholderText, pos = 1) {
@@ -63,7 +62,15 @@ const emptyPlaceholder = placeholderText => ({
63
62
  hasPlaceholder: false,
64
63
  placeholderText
65
64
  });
66
- function createPlaceHolderStateFrom(isEditorFocused, editorState, isTypeAheadOpen, defaultPlaceholderText, bracketPlaceholderText, emptyLinePlaceholder) {
65
+ function createPlaceHolderStateFrom({
66
+ isEditorFocused,
67
+ editorState,
68
+ isTypeAheadOpen,
69
+ defaultPlaceholderText,
70
+ intl,
71
+ bracketPlaceholderText,
72
+ emptyLinePlaceholder
73
+ }) {
67
74
  if (isTypeAheadOpen !== null && isTypeAheadOpen !== void 0 && isTypeAheadOpen(editorState)) {
68
75
  return emptyPlaceholder(defaultPlaceholderText);
69
76
  }
@@ -89,10 +96,21 @@ function createPlaceHolderStateFrom(isEditorFocused, editorState, isTypeAheadOpe
89
96
  }
90
97
  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';
91
98
  if (nodeTypesWithShortPlaceholderText.includes(parentType) && isEmptyNode) {
92
- return setPlaceHolderState(SHORT_NODE_PLACEHOLDER_TEXT, $from.pos);
99
+ var _table$node$firstChil;
100
+ if (!fg('platform_editor_controls_patch_3')) {
101
+ return setPlaceHolderState(intl.formatMessage(messages.shortEmptyNodePlaceholderText), $from.pos);
102
+ }
103
+ const table = findParentNode(node => node.type === editorState.schema.nodes.table)(editorState.selection);
104
+ if (!table) {
105
+ return emptyPlaceholder(defaultPlaceholderText);
106
+ }
107
+ 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;
108
+ if (isFirstCell) {
109
+ return setPlaceHolderState(intl.formatMessage(messages.shortEmptyNodePlaceholderText), $from.pos);
110
+ }
93
111
  }
94
112
  if (nodeTypesWithLongPlaceholderText.includes(parentType) && isEmptyNode) {
95
- return setPlaceHolderState(NODE_PLACEHOLDER_TEXT, $from.pos);
113
+ return setPlaceHolderState(intl.formatMessage(messages.longEmptyNodePlaceholderText), $from.pos);
96
114
  }
97
115
  return emptyPlaceholder(defaultPlaceholderText);
98
116
  }
@@ -106,7 +124,7 @@ function createPlaceHolderStateFrom(isEditorFocused, editorState, isTypeAheadOpe
106
124
  }
107
125
  return emptyPlaceholder(defaultPlaceholderText);
108
126
  }
109
- export function createPlugin(defaultPlaceholderText, bracketPlaceholderText, emptyLinePlaceholder, api) {
127
+ export function createPlugin(intl, defaultPlaceholderText, bracketPlaceholderText, emptyLinePlaceholder, api) {
110
128
  if (!defaultPlaceholderText && !bracketPlaceholderText) {
111
129
  return;
112
130
  }
@@ -115,7 +133,15 @@ export function createPlugin(defaultPlaceholderText, bracketPlaceholderText, emp
115
133
  state: {
116
134
  init: (_, state) => {
117
135
  var _api$focus, _api$focus$sharedStat, _api$typeAhead;
118
- return createPlaceHolderStateFrom(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), state, api === null || api === void 0 ? void 0 : (_api$typeAhead = api.typeAhead) === null || _api$typeAhead === void 0 ? void 0 : _api$typeAhead.actions.isOpen, defaultPlaceholderText, bracketPlaceholderText, emptyLinePlaceholder);
136
+ return createPlaceHolderStateFrom({
137
+ 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),
138
+ editorState: state,
139
+ isTypeAheadOpen: api === null || api === void 0 ? void 0 : (_api$typeAhead = api.typeAhead) === null || _api$typeAhead === void 0 ? void 0 : _api$typeAhead.actions.isOpen,
140
+ defaultPlaceholderText,
141
+ bracketPlaceholderText,
142
+ emptyLinePlaceholder,
143
+ intl
144
+ });
119
145
  },
120
146
  apply: (tr, placeholderState, _oldEditorState, newEditorState) => {
121
147
  var _api$focus2, _api$focus2$sharedSta, _api$typeAhead3, _placeholderState$pla;
@@ -123,9 +149,25 @@ export function createPlugin(defaultPlaceholderText, bracketPlaceholderText, emp
123
149
  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);
124
150
  if ((meta === null || meta === void 0 ? void 0 : meta.placeholderText) !== undefined) {
125
151
  var _api$typeAhead2;
126
- return createPlaceHolderStateFrom(isEditorFocused, newEditorState, api === null || api === void 0 ? void 0 : (_api$typeAhead2 = api.typeAhead) === null || _api$typeAhead2 === void 0 ? void 0 : _api$typeAhead2.actions.isOpen, meta.placeholderText, bracketPlaceholderText, emptyLinePlaceholder);
152
+ return createPlaceHolderStateFrom({
153
+ isEditorFocused,
154
+ editorState: newEditorState,
155
+ isTypeAheadOpen: api === null || api === void 0 ? void 0 : (_api$typeAhead2 = api.typeAhead) === null || _api$typeAhead2 === void 0 ? void 0 : _api$typeAhead2.actions.isOpen,
156
+ defaultPlaceholderText: meta.placeholderText,
157
+ bracketPlaceholderText,
158
+ emptyLinePlaceholder,
159
+ intl
160
+ });
127
161
  }
128
- return createPlaceHolderStateFrom(isEditorFocused, newEditorState, api === null || api === void 0 ? void 0 : (_api$typeAhead3 = api.typeAhead) === null || _api$typeAhead3 === void 0 ? void 0 : _api$typeAhead3.actions.isOpen, (_placeholderState$pla = placeholderState === null || placeholderState === void 0 ? void 0 : placeholderState.placeholderText) !== null && _placeholderState$pla !== void 0 ? _placeholderState$pla : defaultPlaceholderText, bracketPlaceholderText, emptyLinePlaceholder);
162
+ return createPlaceHolderStateFrom({
163
+ isEditorFocused,
164
+ editorState: newEditorState,
165
+ isTypeAheadOpen: api === null || api === void 0 ? void 0 : (_api$typeAhead3 = api.typeAhead) === null || _api$typeAhead3 === void 0 ? void 0 : _api$typeAhead3.actions.isOpen,
166
+ defaultPlaceholderText: (_placeholderState$pla = placeholderState === null || placeholderState === void 0 ? void 0 : placeholderState.placeholderText) !== null && _placeholderState$pla !== void 0 ? _placeholderState$pla : defaultPlaceholderText,
167
+ bracketPlaceholderText,
168
+ emptyLinePlaceholder,
169
+ intl
170
+ });
129
171
  }
130
172
  },
131
173
  props: {
@@ -168,7 +210,9 @@ export const placeholderPlugin = ({
168
210
  pmPlugins() {
169
211
  return [{
170
212
  name: 'placeholder',
171
- plugin: () => createPlugin(options && options.placeholder, options && options.placeholderBracketHint, options && options.emptyLinePlaceholder, api)
213
+ plugin: ({
214
+ getIntl
215
+ }) => createPlugin(getIntl(), options && options.placeholder, options && options.placeholderBracketHint, options && options.emptyLinePlaceholder, api)
172
216
  }];
173
217
  }
174
218
  };
package/dist/esm/placeholderPlugin.js CHANGED
@@ -1,17 +1,16 @@
1
+ import { placeholderTextMessages as messages } from '@atlaskit/editor-common/messages';
1
2
  import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
2
3
  import { bracketTyped, browser, isEmptyDocument, isEmptyParagraph } from '@atlaskit/editor-common/utils';
3
4
  import { PluginKey } from '@atlaskit/editor-prosemirror/state';
5
+ import { findParentNode } from '@atlaskit/editor-prosemirror/utils';
4
6
  import { Decoration, DecorationSet } from '@atlaskit/editor-prosemirror/view';
7
+ import { fg } from '@atlaskit/platform-feature-flags';
5
8
  import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
6
9
  export var pluginKey = new PluginKey('placeholderPlugin');
7
10
  function getPlaceholderState(editorState) {
8
11
  return pluginKey.getState(editorState);
9
12
  }
10
13
  export var placeholderTestId = 'placeholder-test-id';
11
-
12
- // TODO: ED-26962 - Use i18n for new placeholders
13
- var SHORT_NODE_PLACEHOLDER_TEXT = '/ to insert';
14
- var NODE_PLACEHOLDER_TEXT = 'Type / to insert elements';
15
14
  var nodeTypesWithLongPlaceholderText = ['expand', 'panel'];
16
15
  var nodeTypesWithShortPlaceholderText = ['tableCell', 'tableHeader'];
17
16
  export function createPlaceholderDecoration(editorState, placeholderText) {
@@ -66,7 +65,14 @@ var emptyPlaceholder = function emptyPlaceholder(placeholderText) {
66
65
  placeholderText: placeholderText
67
66
  };
68
67
  };
69
- function createPlaceHolderStateFrom(isEditorFocused, editorState, isTypeAheadOpen, defaultPlaceholderText, bracketPlaceholderText, emptyLinePlaceholder) {
68
+ function createPlaceHolderStateFrom(_ref) {
69
+ var isEditorFocused = _ref.isEditorFocused,
70
+ editorState = _ref.editorState,
71
+ isTypeAheadOpen = _ref.isTypeAheadOpen,
72
+ defaultPlaceholderText = _ref.defaultPlaceholderText,
73
+ intl = _ref.intl,
74
+ bracketPlaceholderText = _ref.bracketPlaceholderText,
75
+ emptyLinePlaceholder = _ref.emptyLinePlaceholder;
70
76
  if (isTypeAheadOpen !== null && isTypeAheadOpen !== void 0 && isTypeAheadOpen(editorState)) {
71
77
  return emptyPlaceholder(defaultPlaceholderText);
72
78
  }
@@ -91,10 +97,23 @@ function createPlaceHolderStateFrom(isEditorFocused, editorState, isTypeAheadOpe
91
97
  }
92
98
  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';
93
99
  if (nodeTypesWithShortPlaceholderText.includes(parentType) && isEmptyNode) {
94
- return setPlaceHolderState(SHORT_NODE_PLACEHOLDER_TEXT, $from.pos);
100
+ var _table$node$firstChil;
101
+ if (!fg('platform_editor_controls_patch_3')) {
102
+ return setPlaceHolderState(intl.formatMessage(messages.shortEmptyNodePlaceholderText), $from.pos);
103
+ }
104
+ var table = findParentNode(function (node) {
105
+ return node.type === editorState.schema.nodes.table;
106
+ })(editorState.selection);
107
+ if (!table) {
108
+ return emptyPlaceholder(defaultPlaceholderText);
109
+ }
110
+ 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;
111
+ if (isFirstCell) {
112
+ return setPlaceHolderState(intl.formatMessage(messages.shortEmptyNodePlaceholderText), $from.pos);
113
+ }
95
114
  }
96
115
  if (nodeTypesWithLongPlaceholderText.includes(parentType) && isEmptyNode) {
97
- return setPlaceHolderState(NODE_PLACEHOLDER_TEXT, $from.pos);
116
+ return setPlaceHolderState(intl.formatMessage(messages.longEmptyNodePlaceholderText), $from.pos);
98
117
  }
99
118
  return emptyPlaceholder(defaultPlaceholderText);
100
119
  }
@@ -106,7 +125,7 @@ function createPlaceHolderStateFrom(isEditorFocused, editorState, isTypeAheadOpe
106
125
  }
107
126
  return emptyPlaceholder(defaultPlaceholderText);
108
127
  }
109
- export function createPlugin(defaultPlaceholderText, bracketPlaceholderText, emptyLinePlaceholder, api) {
128
+ export function createPlugin(intl, defaultPlaceholderText, bracketPlaceholderText, emptyLinePlaceholder, api) {
110
129
  if (!defaultPlaceholderText && !bracketPlaceholderText) {
111
130
  return;
112
131
  }
@@ -115,7 +134,15 @@ export function createPlugin(defaultPlaceholderText, bracketPlaceholderText, emp
115
134
  state: {
116
135
  init: function init(_, state) {
117
136
  var _api$focus, _api$typeAhead;
118
- return createPlaceHolderStateFrom(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), state, api === null || api === void 0 || (_api$typeAhead = api.typeAhead) === null || _api$typeAhead === void 0 ? void 0 : _api$typeAhead.actions.isOpen, defaultPlaceholderText, bracketPlaceholderText, emptyLinePlaceholder);
137
+ return createPlaceHolderStateFrom({
138
+ 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),
139
+ editorState: state,
140
+ isTypeAheadOpen: api === null || api === void 0 || (_api$typeAhead = api.typeAhead) === null || _api$typeAhead === void 0 ? void 0 : _api$typeAhead.actions.isOpen,
141
+ defaultPlaceholderText: defaultPlaceholderText,
142
+ bracketPlaceholderText: bracketPlaceholderText,
143
+ emptyLinePlaceholder: emptyLinePlaceholder,
144
+ intl: intl
145
+ });
119
146
  },
120
147
  apply: function apply(tr, placeholderState, _oldEditorState, newEditorState) {
121
148
  var _api$focus2, _api$typeAhead3, _placeholderState$pla;
@@ -123,9 +150,25 @@ export function createPlugin(defaultPlaceholderText, bracketPlaceholderText, emp
123
150
  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);
124
151
  if ((meta === null || meta === void 0 ? void 0 : meta.placeholderText) !== undefined) {
125
152
  var _api$typeAhead2;
126
- return createPlaceHolderStateFrom(isEditorFocused, newEditorState, api === null || api === void 0 || (_api$typeAhead2 = api.typeAhead) === null || _api$typeAhead2 === void 0 ? void 0 : _api$typeAhead2.actions.isOpen, meta.placeholderText, bracketPlaceholderText, emptyLinePlaceholder);
153
+ return createPlaceHolderStateFrom({
154
+ isEditorFocused: isEditorFocused,
155
+ editorState: newEditorState,
156
+ isTypeAheadOpen: api === null || api === void 0 || (_api$typeAhead2 = api.typeAhead) === null || _api$typeAhead2 === void 0 ? void 0 : _api$typeAhead2.actions.isOpen,
157
+ defaultPlaceholderText: meta.placeholderText,
158
+ bracketPlaceholderText: bracketPlaceholderText,
159
+ emptyLinePlaceholder: emptyLinePlaceholder,
160
+ intl: intl
161
+ });
127
162
  }
128
- return createPlaceHolderStateFrom(isEditorFocused, newEditorState, api === null || api === void 0 || (_api$typeAhead3 = api.typeAhead) === null || _api$typeAhead3 === void 0 ? void 0 : _api$typeAhead3.actions.isOpen, (_placeholderState$pla = placeholderState === null || placeholderState === void 0 ? void 0 : placeholderState.placeholderText) !== null && _placeholderState$pla !== void 0 ? _placeholderState$pla : defaultPlaceholderText, bracketPlaceholderText, emptyLinePlaceholder);
163
+ return createPlaceHolderStateFrom({
164
+ isEditorFocused: isEditorFocused,
165
+ editorState: newEditorState,
166
+ isTypeAheadOpen: api === null || api === void 0 || (_api$typeAhead3 = api.typeAhead) === null || _api$typeAhead3 === void 0 ? void 0 : _api$typeAhead3.actions.isOpen,
167
+ defaultPlaceholderText: (_placeholderState$pla = placeholderState === null || placeholderState === void 0 ? void 0 : placeholderState.placeholderText) !== null && _placeholderState$pla !== void 0 ? _placeholderState$pla : defaultPlaceholderText,
168
+ bracketPlaceholderText: bracketPlaceholderText,
169
+ emptyLinePlaceholder: emptyLinePlaceholder,
170
+ intl: intl
171
+ });
129
172
  }
130
173
  },
131
174
  props: {
@@ -144,16 +187,16 @@ export function createPlugin(defaultPlaceholderText, bracketPlaceholderText, emp
144
187
  }
145
188
  });
146
189
  }
147
- export var placeholderPlugin = function placeholderPlugin(_ref) {
148
- var options = _ref.config,
149
- api = _ref.api;
190
+ export var placeholderPlugin = function placeholderPlugin(_ref2) {
191
+ var options = _ref2.config,
192
+ api = _ref2.api;
150
193
  var currentPlaceholder = options === null || options === void 0 ? void 0 : options.placeholder;
151
194
  return {
152
195
  name: 'placeholder',
153
196
  commands: {
154
197
  setPlaceholder: function setPlaceholder(placeholderText) {
155
- return function (_ref2) {
156
- var tr = _ref2.tr;
198
+ return function (_ref3) {
199
+ var tr = _ref3.tr;
157
200
  if (currentPlaceholder !== placeholderText) {
158
201
  currentPlaceholder = placeholderText;
159
202
  return tr.setMeta(pluginKey, {
@@ -167,8 +210,9 @@ export var placeholderPlugin = function placeholderPlugin(_ref) {
167
210
  pmPlugins: function pmPlugins() {
168
211
  return [{
169
212
  name: 'placeholder',
170
- plugin: function plugin() {
171
- return createPlugin(options && options.placeholder, options && options.placeholderBracketHint, options && options.emptyLinePlaceholder, api);
213
+ plugin: function plugin(_ref4) {
214
+ var getIntl = _ref4.getIntl;
215
+ return createPlugin(getIntl(), options && options.placeholder, options && options.placeholderBracketHint, options && options.emptyLinePlaceholder, api);
172
216
  }
173
217
  }];
174
218
  }
package/dist/types/placeholderPlugin.d.ts CHANGED
@@ -1,3 +1,4 @@
1
+ import type { IntlShape } from 'react-intl-next';
1
2
  import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
2
3
  import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
3
4
  import type { EditorState } from '@atlaskit/editor-prosemirror/state';
@@ -7,5 +8,5 @@ import type { PlaceholderPlugin } from './placeholderPluginType';
7
8
  export declare const pluginKey: PluginKey<any>;
8
9
  export declare const placeholderTestId = "placeholder-test-id";
9
10
  export declare function createPlaceholderDecoration(editorState: EditorState, placeholderText: string, pos?: number): DecorationSet;
10
- export declare function createPlugin(defaultPlaceholderText?: string, bracketPlaceholderText?: string, emptyLinePlaceholder?: string, api?: ExtractInjectionAPI<PlaceholderPlugin>): SafePlugin | undefined;
11
+ export declare function createPlugin(intl: IntlShape, defaultPlaceholderText?: string, bracketPlaceholderText?: string, emptyLinePlaceholder?: string, api?: ExtractInjectionAPI<PlaceholderPlugin>): SafePlugin | undefined;
11
12
  export declare const placeholderPlugin: PlaceholderPlugin;
package/dist/types-ts4.5/placeholderPlugin.d.ts CHANGED
@@ -1,3 +1,4 @@
1
+ import type { IntlShape } from 'react-intl-next';
1
2
  import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
2
3
  import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
3
4
  import type { EditorState } from '@atlaskit/editor-prosemirror/state';
@@ -7,5 +8,5 @@ import type { PlaceholderPlugin } from './placeholderPluginType';
7
8
  export declare const pluginKey: PluginKey<any>;
8
9
  export declare const placeholderTestId = "placeholder-test-id";
9
10
  export declare function createPlaceholderDecoration(editorState: EditorState, placeholderText: string, pos?: number): DecorationSet;
10
- export declare function createPlugin(defaultPlaceholderText?: string, bracketPlaceholderText?: string, emptyLinePlaceholder?: string, api?: ExtractInjectionAPI<PlaceholderPlugin>): SafePlugin | undefined;
11
+ export declare function createPlugin(intl: IntlShape, defaultPlaceholderText?: string, bracketPlaceholderText?: string, emptyLinePlaceholder?: string, 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": "2.0.9",
3
+ "version": "2.0.11",
4
4
  "description": "Placeholder plugin for @atlaskit/editor-core.",
5
5
  "author": "Atlassian Pty Ltd",
6
6
  "license": "Apache-2.0",
@@ -31,17 +31,19 @@
31
31
  ".": "./src/index.ts"
32
32
  },
33
33
  "dependencies": {
34
- "@atlaskit/editor-common": "^102.13.0",
34
+ "@atlaskit/editor-common": "^102.18.0",
35
35
  "@atlaskit/editor-plugin-composition": "^1.3.0",
36
36
  "@atlaskit/editor-plugin-focus": "^1.5.0",
37
- "@atlaskit/editor-plugin-type-ahead": "^2.2.0",
37
+ "@atlaskit/editor-plugin-type-ahead": "^2.3.0",
38
38
  "@atlaskit/editor-prosemirror": "7.0.0",
39
- "@atlaskit/tmp-editor-statsig": "^4.4.0",
39
+ "@atlaskit/platform-feature-flags": "^1.1.0",
40
+ "@atlaskit/tmp-editor-statsig": "^4.6.0",
40
41
  "@babel/runtime": "^7.0.0"
41
42
  },
42
43
  "peerDependencies": {
43
44
  "react": "^18.2.0",
44
- "react-dom": "^18.2.0"
45
+ "react-dom": "^18.2.0",
46
+ "react-intl-next": "npm:react-intl@^5.18.1"
45
47
  },
46
48
  "devDependencies": {
47
49
  "@testing-library/react": "^13.4.0",
@@ -82,5 +84,10 @@
82
84
  "import-no-extraneous-disable-for-examples-and-docs"
83
85
  ]
84
86
  }
87
+ },
88
+ "platform-feature-flags": {
89
+ "platform_editor_controls_patch_3": {
90
+ "type": "boolean"
91
+ }
85
92
  }
86
93
  }