@atlaskit/editor-plugin-placeholder 2.0.8 → 2.0.10

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 +17 -0
  2. package/dist/cjs/placeholderPlugin.js +54 -18
  3. package/dist/es2019/placeholderPlugin.js +50 -12
  4. package/dist/esm/placeholderPlugin.js +54 -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 +6 -5
package/CHANGELOG.md CHANGED
@@ -1,5 +1,22 @@
1
1
  # @atlaskit/editor-plugin-placeholder
2
2
 
3
+ ## 2.0.10
4
+
5
+ ### Patch Changes
6
+
7
+ - [#135586](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/135586)
8
+ [`3aeba66081612`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/3aeba66081612) -
9
+ ED-26593 Add missing i18n for editor control
10
+ - Updated dependencies
11
+
12
+ ## 2.0.9
13
+
14
+ ### Patch Changes
15
+
16
+ - [#131399](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/131399)
17
+ [`3e2bb97c408f7`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/3e2bb97c408f7) -
18
+ Add className to nested nodes for placeholder text to selectively apply truncation on long text
19
+
3
20
  ## 2.0.8
4
21
 
5
22
  ### Patch Changes
package/dist/cjs/placeholderPlugin.js CHANGED
@@ -6,6 +6,7 @@ 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");
@@ -16,10 +17,6 @@ function getPlaceholderState(editorState) {
16
17
  return pluginKey.getState(editorState);
17
18
  }
18
19
  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
20
  var nodeTypesWithLongPlaceholderText = ['expand', 'panel'];
24
21
  var nodeTypesWithShortPlaceholderText = ['tableCell', 'tableHeader'];
25
22
  function createPlaceholderDecoration(editorState, placeholderText) {
@@ -49,6 +46,13 @@ function createPlaceholderDecoration(editorState, placeholderText) {
49
46
  buffNode.textContent = ' ';
50
47
  placeholderDecoration.appendChild(buffNode);
51
48
  }
49
+ var isTargetNested = editorState.doc.resolve(pos).depth > 1;
50
+
51
+ // only truncate text for nested nodes, otherwise applying 'overflow: hidden;' to top level nodes
52
+ // creates issues with quick insert button
53
+ if (isTargetNested && (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1')) {
54
+ placeholderDecoration.classList.add('placeholder-decoration-hide-overflow');
55
+ }
52
56
  return _view.DecorationSet.create(editorState.doc, [_view.Decoration.widget(pos, placeholderDecoration, {
53
57
  side: 0,
54
58
  key: "placeholder ".concat(placeholderText)
@@ -67,7 +71,14 @@ var emptyPlaceholder = function emptyPlaceholder(placeholderText) {
67
71
  placeholderText: placeholderText
68
72
  };
69
73
  };
70
- function createPlaceHolderStateFrom(isEditorFocused, editorState, isTypeAheadOpen, defaultPlaceholderText, bracketPlaceholderText, emptyLinePlaceholder) {
74
+ function createPlaceHolderStateFrom(_ref) {
75
+ var isEditorFocused = _ref.isEditorFocused,
76
+ editorState = _ref.editorState,
77
+ isTypeAheadOpen = _ref.isTypeAheadOpen,
78
+ defaultPlaceholderText = _ref.defaultPlaceholderText,
79
+ intl = _ref.intl,
80
+ bracketPlaceholderText = _ref.bracketPlaceholderText,
81
+ emptyLinePlaceholder = _ref.emptyLinePlaceholder;
71
82
  if (isTypeAheadOpen !== null && isTypeAheadOpen !== void 0 && isTypeAheadOpen(editorState)) {
72
83
  return emptyPlaceholder(defaultPlaceholderText);
73
84
  }
@@ -92,10 +103,10 @@ function createPlaceHolderStateFrom(isEditorFocused, editorState, isTypeAheadOpe
92
103
  }
93
104
  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';
94
105
  if (nodeTypesWithShortPlaceholderText.includes(parentType) && isEmptyNode) {
95
- return setPlaceHolderState(SHORT_NODE_PLACEHOLDER_TEXT, $from.pos);
106
+ return setPlaceHolderState(intl.formatMessage(_messages.placeholderTextMessages.shortEmptyNodePlaceholderText), $from.pos);
96
107
  }
97
108
  if (nodeTypesWithLongPlaceholderText.includes(parentType) && isEmptyNode) {
98
- return setPlaceHolderState(NODE_PLACEHOLDER_TEXT, $from.pos);
109
+ return setPlaceHolderState(intl.formatMessage(_messages.placeholderTextMessages.longEmptyNodePlaceholderText), $from.pos);
99
110
  }
100
111
  return emptyPlaceholder(defaultPlaceholderText);
101
112
  }
@@ -107,7 +118,7 @@ function createPlaceHolderStateFrom(isEditorFocused, editorState, isTypeAheadOpe
107
118
  }
108
119
  return emptyPlaceholder(defaultPlaceholderText);
109
120
  }
110
- function createPlugin(defaultPlaceholderText, bracketPlaceholderText, emptyLinePlaceholder, api) {
121
+ function createPlugin(intl, defaultPlaceholderText, bracketPlaceholderText, emptyLinePlaceholder, api) {
111
122
  if (!defaultPlaceholderText && !bracketPlaceholderText) {
112
123
  return;
113
124
  }
@@ -116,7 +127,15 @@ function createPlugin(defaultPlaceholderText, bracketPlaceholderText, emptyLineP
116
127
  state: {
117
128
  init: function init(_, state) {
118
129
  var _api$focus, _api$typeAhead;
119
- 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);
130
+ return createPlaceHolderStateFrom({
131
+ 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),
132
+ editorState: state,
133
+ isTypeAheadOpen: api === null || api === void 0 || (_api$typeAhead = api.typeAhead) === null || _api$typeAhead === void 0 ? void 0 : _api$typeAhead.actions.isOpen,
134
+ defaultPlaceholderText: defaultPlaceholderText,
135
+ bracketPlaceholderText: bracketPlaceholderText,
136
+ emptyLinePlaceholder: emptyLinePlaceholder,
137
+ intl: intl
138
+ });
120
139
  },
121
140
  apply: function apply(tr, placeholderState, _oldEditorState, newEditorState) {
122
141
  var _api$focus2, _api$typeAhead3, _placeholderState$pla;
@@ -124,9 +143,25 @@ function createPlugin(defaultPlaceholderText, bracketPlaceholderText, emptyLineP
124
143
  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);
125
144
  if ((meta === null || meta === void 0 ? void 0 : meta.placeholderText) !== undefined) {
126
145
  var _api$typeAhead2;
127
- 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);
146
+ return createPlaceHolderStateFrom({
147
+ isEditorFocused: isEditorFocused,
148
+ editorState: newEditorState,
149
+ isTypeAheadOpen: api === null || api === void 0 || (_api$typeAhead2 = api.typeAhead) === null || _api$typeAhead2 === void 0 ? void 0 : _api$typeAhead2.actions.isOpen,
150
+ defaultPlaceholderText: meta.placeholderText,
151
+ bracketPlaceholderText: bracketPlaceholderText,
152
+ emptyLinePlaceholder: emptyLinePlaceholder,
153
+ intl: intl
154
+ });
128
155
  }
129
- 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);
156
+ return createPlaceHolderStateFrom({
157
+ isEditorFocused: isEditorFocused,
158
+ editorState: newEditorState,
159
+ isTypeAheadOpen: api === null || api === void 0 || (_api$typeAhead3 = api.typeAhead) === null || _api$typeAhead3 === void 0 ? void 0 : _api$typeAhead3.actions.isOpen,
160
+ defaultPlaceholderText: (_placeholderState$pla = placeholderState === null || placeholderState === void 0 ? void 0 : placeholderState.placeholderText) !== null && _placeholderState$pla !== void 0 ? _placeholderState$pla : defaultPlaceholderText,
161
+ bracketPlaceholderText: bracketPlaceholderText,
162
+ emptyLinePlaceholder: emptyLinePlaceholder,
163
+ intl: intl
164
+ });
130
165
  }
131
166
  },
132
167
  props: {
@@ -145,16 +180,16 @@ function createPlugin(defaultPlaceholderText, bracketPlaceholderText, emptyLineP
145
180
  }
146
181
  });
147
182
  }
148
- var placeholderPlugin = exports.placeholderPlugin = function placeholderPlugin(_ref) {
149
- var options = _ref.config,
150
- api = _ref.api;
183
+ var placeholderPlugin = exports.placeholderPlugin = function placeholderPlugin(_ref2) {
184
+ var options = _ref2.config,
185
+ api = _ref2.api;
151
186
  var currentPlaceholder = options === null || options === void 0 ? void 0 : options.placeholder;
152
187
  return {
153
188
  name: 'placeholder',
154
189
  commands: {
155
190
  setPlaceholder: function setPlaceholder(placeholderText) {
156
- return function (_ref2) {
157
- var tr = _ref2.tr;
191
+ return function (_ref3) {
192
+ var tr = _ref3.tr;
158
193
  if (currentPlaceholder !== placeholderText) {
159
194
  currentPlaceholder = placeholderText;
160
195
  return tr.setMeta(pluginKey, {
@@ -168,8 +203,9 @@ var placeholderPlugin = exports.placeholderPlugin = function placeholderPlugin(_
168
203
  pmPlugins: function pmPlugins() {
169
204
  return [{
170
205
  name: 'placeholder',
171
- plugin: function plugin() {
172
- return createPlugin(options && options.placeholder, options && options.placeholderBracketHint, options && options.emptyLinePlaceholder, api);
206
+ plugin: function plugin(_ref4) {
207
+ var getIntl = _ref4.getIntl;
208
+ return createPlugin(getIntl(), options && options.placeholder, options && options.placeholderBracketHint, options && options.emptyLinePlaceholder, api);
173
209
  }
174
210
  }];
175
211
  }
package/dist/es2019/placeholderPlugin.js CHANGED
@@ -1,3 +1,4 @@
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';
@@ -8,10 +9,6 @@ function getPlaceholderState(editorState) {
8
9
  return pluginKey.getState(editorState);
9
10
  }
10
11
  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
12
  const nodeTypesWithLongPlaceholderText = ['expand', 'panel'];
16
13
  const nodeTypesWithShortPlaceholderText = ['tableCell', 'tableHeader'];
17
14
  export function createPlaceholderDecoration(editorState, placeholderText, pos = 1) {
@@ -40,6 +37,13 @@ export function createPlaceholderDecoration(editorState, placeholderText, pos =
40
37
  buffNode.textContent = ' ';
41
38
  placeholderDecoration.appendChild(buffNode);
42
39
  }
40
+ const isTargetNested = editorState.doc.resolve(pos).depth > 1;
41
+
42
+ // only truncate text for nested nodes, otherwise applying 'overflow: hidden;' to top level nodes
43
+ // creates issues with quick insert button
44
+ if (isTargetNested && editorExperiment('platform_editor_controls', 'variant1')) {
45
+ placeholderDecoration.classList.add('placeholder-decoration-hide-overflow');
46
+ }
43
47
  return DecorationSet.create(editorState.doc, [Decoration.widget(pos, placeholderDecoration, {
44
48
  side: 0,
45
49
  key: `placeholder ${placeholderText}`
@@ -56,7 +60,15 @@ const emptyPlaceholder = placeholderText => ({
56
60
  hasPlaceholder: false,
57
61
  placeholderText
58
62
  });
59
- function createPlaceHolderStateFrom(isEditorFocused, editorState, isTypeAheadOpen, defaultPlaceholderText, bracketPlaceholderText, emptyLinePlaceholder) {
63
+ function createPlaceHolderStateFrom({
64
+ isEditorFocused,
65
+ editorState,
66
+ isTypeAheadOpen,
67
+ defaultPlaceholderText,
68
+ intl,
69
+ bracketPlaceholderText,
70
+ emptyLinePlaceholder
71
+ }) {
60
72
  if (isTypeAheadOpen !== null && isTypeAheadOpen !== void 0 && isTypeAheadOpen(editorState)) {
61
73
  return emptyPlaceholder(defaultPlaceholderText);
62
74
  }
@@ -82,10 +94,10 @@ function createPlaceHolderStateFrom(isEditorFocused, editorState, isTypeAheadOpe
82
94
  }
83
95
  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';
84
96
  if (nodeTypesWithShortPlaceholderText.includes(parentType) && isEmptyNode) {
85
- return setPlaceHolderState(SHORT_NODE_PLACEHOLDER_TEXT, $from.pos);
97
+ return setPlaceHolderState(intl.formatMessage(messages.shortEmptyNodePlaceholderText), $from.pos);
86
98
  }
87
99
  if (nodeTypesWithLongPlaceholderText.includes(parentType) && isEmptyNode) {
88
- return setPlaceHolderState(NODE_PLACEHOLDER_TEXT, $from.pos);
100
+ return setPlaceHolderState(intl.formatMessage(messages.longEmptyNodePlaceholderText), $from.pos);
89
101
  }
90
102
  return emptyPlaceholder(defaultPlaceholderText);
91
103
  }
@@ -99,7 +111,7 @@ function createPlaceHolderStateFrom(isEditorFocused, editorState, isTypeAheadOpe
99
111
  }
100
112
  return emptyPlaceholder(defaultPlaceholderText);
101
113
  }
102
- export function createPlugin(defaultPlaceholderText, bracketPlaceholderText, emptyLinePlaceholder, api) {
114
+ export function createPlugin(intl, defaultPlaceholderText, bracketPlaceholderText, emptyLinePlaceholder, api) {
103
115
  if (!defaultPlaceholderText && !bracketPlaceholderText) {
104
116
  return;
105
117
  }
@@ -108,7 +120,15 @@ export function createPlugin(defaultPlaceholderText, bracketPlaceholderText, emp
108
120
  state: {
109
121
  init: (_, state) => {
110
122
  var _api$focus, _api$focus$sharedStat, _api$typeAhead;
111
- 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);
123
+ return createPlaceHolderStateFrom({
124
+ 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),
125
+ editorState: state,
126
+ isTypeAheadOpen: api === null || api === void 0 ? void 0 : (_api$typeAhead = api.typeAhead) === null || _api$typeAhead === void 0 ? void 0 : _api$typeAhead.actions.isOpen,
127
+ defaultPlaceholderText,
128
+ bracketPlaceholderText,
129
+ emptyLinePlaceholder,
130
+ intl
131
+ });
112
132
  },
113
133
  apply: (tr, placeholderState, _oldEditorState, newEditorState) => {
114
134
  var _api$focus2, _api$focus2$sharedSta, _api$typeAhead3, _placeholderState$pla;
@@ -116,9 +136,25 @@ export function createPlugin(defaultPlaceholderText, bracketPlaceholderText, emp
116
136
  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);
117
137
  if ((meta === null || meta === void 0 ? void 0 : meta.placeholderText) !== undefined) {
118
138
  var _api$typeAhead2;
119
- 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);
139
+ return createPlaceHolderStateFrom({
140
+ isEditorFocused,
141
+ editorState: newEditorState,
142
+ isTypeAheadOpen: api === null || api === void 0 ? void 0 : (_api$typeAhead2 = api.typeAhead) === null || _api$typeAhead2 === void 0 ? void 0 : _api$typeAhead2.actions.isOpen,
143
+ defaultPlaceholderText: meta.placeholderText,
144
+ bracketPlaceholderText,
145
+ emptyLinePlaceholder,
146
+ intl
147
+ });
120
148
  }
121
- 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);
149
+ return createPlaceHolderStateFrom({
150
+ isEditorFocused,
151
+ editorState: newEditorState,
152
+ isTypeAheadOpen: api === null || api === void 0 ? void 0 : (_api$typeAhead3 = api.typeAhead) === null || _api$typeAhead3 === void 0 ? void 0 : _api$typeAhead3.actions.isOpen,
153
+ defaultPlaceholderText: (_placeholderState$pla = placeholderState === null || placeholderState === void 0 ? void 0 : placeholderState.placeholderText) !== null && _placeholderState$pla !== void 0 ? _placeholderState$pla : defaultPlaceholderText,
154
+ bracketPlaceholderText,
155
+ emptyLinePlaceholder,
156
+ intl
157
+ });
122
158
  }
123
159
  },
124
160
  props: {
@@ -161,7 +197,9 @@ export const placeholderPlugin = ({
161
197
  pmPlugins() {
162
198
  return [{
163
199
  name: 'placeholder',
164
- plugin: () => createPlugin(options && options.placeholder, options && options.placeholderBracketHint, options && options.emptyLinePlaceholder, api)
200
+ plugin: ({
201
+ getIntl
202
+ }) => createPlugin(getIntl(), options && options.placeholder, options && options.placeholderBracketHint, options && options.emptyLinePlaceholder, api)
165
203
  }];
166
204
  }
167
205
  };
package/dist/esm/placeholderPlugin.js CHANGED
@@ -1,3 +1,4 @@
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';
@@ -8,10 +9,6 @@ function getPlaceholderState(editorState) {
8
9
  return pluginKey.getState(editorState);
9
10
  }
10
11
  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
12
  var nodeTypesWithLongPlaceholderText = ['expand', 'panel'];
16
13
  var nodeTypesWithShortPlaceholderText = ['tableCell', 'tableHeader'];
17
14
  export function createPlaceholderDecoration(editorState, placeholderText) {
@@ -41,6 +38,13 @@ export function createPlaceholderDecoration(editorState, placeholderText) {
41
38
  buffNode.textContent = ' ';
42
39
  placeholderDecoration.appendChild(buffNode);
43
40
  }
41
+ var isTargetNested = editorState.doc.resolve(pos).depth > 1;
42
+
43
+ // only truncate text for nested nodes, otherwise applying 'overflow: hidden;' to top level nodes
44
+ // creates issues with quick insert button
45
+ if (isTargetNested && editorExperiment('platform_editor_controls', 'variant1')) {
46
+ placeholderDecoration.classList.add('placeholder-decoration-hide-overflow');
47
+ }
44
48
  return DecorationSet.create(editorState.doc, [Decoration.widget(pos, placeholderDecoration, {
45
49
  side: 0,
46
50
  key: "placeholder ".concat(placeholderText)
@@ -59,7 +63,14 @@ var emptyPlaceholder = function emptyPlaceholder(placeholderText) {
59
63
  placeholderText: placeholderText
60
64
  };
61
65
  };
62
- function createPlaceHolderStateFrom(isEditorFocused, editorState, isTypeAheadOpen, defaultPlaceholderText, bracketPlaceholderText, emptyLinePlaceholder) {
66
+ function createPlaceHolderStateFrom(_ref) {
67
+ var isEditorFocused = _ref.isEditorFocused,
68
+ editorState = _ref.editorState,
69
+ isTypeAheadOpen = _ref.isTypeAheadOpen,
70
+ defaultPlaceholderText = _ref.defaultPlaceholderText,
71
+ intl = _ref.intl,
72
+ bracketPlaceholderText = _ref.bracketPlaceholderText,
73
+ emptyLinePlaceholder = _ref.emptyLinePlaceholder;
63
74
  if (isTypeAheadOpen !== null && isTypeAheadOpen !== void 0 && isTypeAheadOpen(editorState)) {
64
75
  return emptyPlaceholder(defaultPlaceholderText);
65
76
  }
@@ -84,10 +95,10 @@ function createPlaceHolderStateFrom(isEditorFocused, editorState, isTypeAheadOpe
84
95
  }
85
96
  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';
86
97
  if (nodeTypesWithShortPlaceholderText.includes(parentType) && isEmptyNode) {
87
- return setPlaceHolderState(SHORT_NODE_PLACEHOLDER_TEXT, $from.pos);
98
+ return setPlaceHolderState(intl.formatMessage(messages.shortEmptyNodePlaceholderText), $from.pos);
88
99
  }
89
100
  if (nodeTypesWithLongPlaceholderText.includes(parentType) && isEmptyNode) {
90
- return setPlaceHolderState(NODE_PLACEHOLDER_TEXT, $from.pos);
101
+ return setPlaceHolderState(intl.formatMessage(messages.longEmptyNodePlaceholderText), $from.pos);
91
102
  }
92
103
  return emptyPlaceholder(defaultPlaceholderText);
93
104
  }
@@ -99,7 +110,7 @@ function createPlaceHolderStateFrom(isEditorFocused, editorState, isTypeAheadOpe
99
110
  }
100
111
  return emptyPlaceholder(defaultPlaceholderText);
101
112
  }
102
- export function createPlugin(defaultPlaceholderText, bracketPlaceholderText, emptyLinePlaceholder, api) {
113
+ export function createPlugin(intl, defaultPlaceholderText, bracketPlaceholderText, emptyLinePlaceholder, api) {
103
114
  if (!defaultPlaceholderText && !bracketPlaceholderText) {
104
115
  return;
105
116
  }
@@ -108,7 +119,15 @@ export function createPlugin(defaultPlaceholderText, bracketPlaceholderText, emp
108
119
  state: {
109
120
  init: function init(_, state) {
110
121
  var _api$focus, _api$typeAhead;
111
- 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);
122
+ return createPlaceHolderStateFrom({
123
+ 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),
124
+ editorState: state,
125
+ isTypeAheadOpen: api === null || api === void 0 || (_api$typeAhead = api.typeAhead) === null || _api$typeAhead === void 0 ? void 0 : _api$typeAhead.actions.isOpen,
126
+ defaultPlaceholderText: defaultPlaceholderText,
127
+ bracketPlaceholderText: bracketPlaceholderText,
128
+ emptyLinePlaceholder: emptyLinePlaceholder,
129
+ intl: intl
130
+ });
112
131
  },
113
132
  apply: function apply(tr, placeholderState, _oldEditorState, newEditorState) {
114
133
  var _api$focus2, _api$typeAhead3, _placeholderState$pla;
@@ -116,9 +135,25 @@ export function createPlugin(defaultPlaceholderText, bracketPlaceholderText, emp
116
135
  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);
117
136
  if ((meta === null || meta === void 0 ? void 0 : meta.placeholderText) !== undefined) {
118
137
  var _api$typeAhead2;
119
- 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);
138
+ return createPlaceHolderStateFrom({
139
+ isEditorFocused: isEditorFocused,
140
+ editorState: newEditorState,
141
+ isTypeAheadOpen: api === null || api === void 0 || (_api$typeAhead2 = api.typeAhead) === null || _api$typeAhead2 === void 0 ? void 0 : _api$typeAhead2.actions.isOpen,
142
+ defaultPlaceholderText: meta.placeholderText,
143
+ bracketPlaceholderText: bracketPlaceholderText,
144
+ emptyLinePlaceholder: emptyLinePlaceholder,
145
+ intl: intl
146
+ });
120
147
  }
121
- 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);
148
+ return createPlaceHolderStateFrom({
149
+ isEditorFocused: isEditorFocused,
150
+ editorState: newEditorState,
151
+ isTypeAheadOpen: api === null || api === void 0 || (_api$typeAhead3 = api.typeAhead) === null || _api$typeAhead3 === void 0 ? void 0 : _api$typeAhead3.actions.isOpen,
152
+ defaultPlaceholderText: (_placeholderState$pla = placeholderState === null || placeholderState === void 0 ? void 0 : placeholderState.placeholderText) !== null && _placeholderState$pla !== void 0 ? _placeholderState$pla : defaultPlaceholderText,
153
+ bracketPlaceholderText: bracketPlaceholderText,
154
+ emptyLinePlaceholder: emptyLinePlaceholder,
155
+ intl: intl
156
+ });
122
157
  }
123
158
  },
124
159
  props: {
@@ -137,16 +172,16 @@ export function createPlugin(defaultPlaceholderText, bracketPlaceholderText, emp
137
172
  }
138
173
  });
139
174
  }
140
- export var placeholderPlugin = function placeholderPlugin(_ref) {
141
- var options = _ref.config,
142
- api = _ref.api;
175
+ export var placeholderPlugin = function placeholderPlugin(_ref2) {
176
+ var options = _ref2.config,
177
+ api = _ref2.api;
143
178
  var currentPlaceholder = options === null || options === void 0 ? void 0 : options.placeholder;
144
179
  return {
145
180
  name: 'placeholder',
146
181
  commands: {
147
182
  setPlaceholder: function setPlaceholder(placeholderText) {
148
- return function (_ref2) {
149
- var tr = _ref2.tr;
183
+ return function (_ref3) {
184
+ var tr = _ref3.tr;
150
185
  if (currentPlaceholder !== placeholderText) {
151
186
  currentPlaceholder = placeholderText;
152
187
  return tr.setMeta(pluginKey, {
@@ -160,8 +195,9 @@ export var placeholderPlugin = function placeholderPlugin(_ref) {
160
195
  pmPlugins: function pmPlugins() {
161
196
  return [{
162
197
  name: 'placeholder',
163
- plugin: function plugin() {
164
- return createPlugin(options && options.placeholder, options && options.placeholderBracketHint, options && options.emptyLinePlaceholder, api);
198
+ plugin: function plugin(_ref4) {
199
+ var getIntl = _ref4.getIntl;
200
+ return createPlugin(getIntl(), options && options.placeholder, options && options.placeholderBracketHint, options && options.emptyLinePlaceholder, api);
165
201
  }
166
202
  }];
167
203
  }
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.8",
3
+ "version": "2.0.10",
4
4
  "description": "Placeholder plugin for @atlaskit/editor-core.",
5
5
  "author": "Atlassian Pty Ltd",
6
6
  "license": "Apache-2.0",
@@ -31,17 +31,18 @@
31
31
  ".": "./src/index.ts"
32
32
  },
33
33
  "dependencies": {
34
- "@atlaskit/editor-common": "^102.12.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.1.0",
37
+ "@atlaskit/editor-plugin-type-ahead": "^2.3.0",
38
38
  "@atlaskit/editor-prosemirror": "7.0.0",
39
- "@atlaskit/tmp-editor-statsig": "^4.1.0",
39
+ "@atlaskit/tmp-editor-statsig": "^4.6.0",
40
40
  "@babel/runtime": "^7.0.0"
41
41
  },
42
42
  "peerDependencies": {
43
43
  "react": "^18.2.0",
44
- "react-dom": "^18.2.0"
44
+ "react-dom": "^18.2.0",
45
+ "react-intl-next": "npm:react-intl@^5.18.1"
45
46
  },
46
47
  "devDependencies": {
47
48
  "@testing-library/react": "^13.4.0",