@atlaskit/editor-plugin-placeholder 2.0.1 → 2.0.2

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 +8 -0
  2. package/dist/cjs/placeholderPlugin.js +35 -3
  3. package/dist/es2019/placeholderPlugin.js +33 -1
  4. package/dist/esm/placeholderPlugin.js +34 -3
  5. package/dist/types/placeholderPlugin.d.ts +5 -0
  6. package/dist/types-ts4.5/placeholderPlugin.d.ts +5 -0
  7. package/package.json +3 -2
package/CHANGELOG.md CHANGED
@@ -1,5 +1,13 @@
1
1
  # @atlaskit/editor-plugin-placeholder
2
2
 
3
+ ## 2.0.2
4
+
5
+ ### Patch Changes
6
+
7
+ - [#121254](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/121254)
8
+ [`3cff2a93c194b`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/3cff2a93c194b) -
9
+ [ux] ED-26844 Add placeholder text to empty lines, table cells, expands, panels and layoutColumns
10
+
3
11
  ## 2.0.1
4
12
 
5
13
  ### Patch Changes
package/dist/cjs/placeholderPlugin.js CHANGED
@@ -3,18 +3,27 @@
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
+ exports.SHORT_NODE_PLACEHOLDER_TEXT = exports.NODE_PLACEHOLDER_TEXT = exports.EMPTY_LINE_PLACEHOLDER_TEXT = void 0;
6
7
  exports.createPlaceholderDecoration = createPlaceholderDecoration;
7
8
  exports.createPlugin = createPlugin;
8
- exports.pluginKey = exports.placeholderTestId = exports.placeholderPlugin = void 0;
9
+ exports.pluginKey = exports.placeholderTestId = exports.placeholderPlugin = exports.nodeTypesWithShortPlaceholderText = exports.nodeTypesWithLongPlaceholderText = void 0;
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");
12
13
  var _view = require("@atlaskit/editor-prosemirror/view");
14
+ var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
13
15
  var pluginKey = exports.pluginKey = new _state.PluginKey('placeholderPlugin');
14
16
  function getPlaceholderState(editorState) {
15
17
  return pluginKey.getState(editorState);
16
18
  }
17
19
  var placeholderTestId = exports.placeholderTestId = 'placeholder-test-id';
20
+
21
+ // TODO: Use i18n for new placeholders
22
+ var SHORT_NODE_PLACEHOLDER_TEXT = exports.SHORT_NODE_PLACEHOLDER_TEXT = '/ to insert';
23
+ var NODE_PLACEHOLDER_TEXT = exports.NODE_PLACEHOLDER_TEXT = 'Type "/" to insert elements';
24
+ var EMPTY_LINE_PLACEHOLDER_TEXT = exports.EMPTY_LINE_PLACEHOLDER_TEXT = 'Select + or type “/” to insert elements';
25
+ var nodeTypesWithLongPlaceholderText = exports.nodeTypesWithLongPlaceholderText = ['expand', 'panel'];
26
+ var nodeTypesWithShortPlaceholderText = exports.nodeTypesWithShortPlaceholderText = ['tableCell', 'tableHeader'];
18
27
  function createPlaceholderDecoration(editorState, placeholderText) {
19
28
  var pos = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 1;
20
29
  var placeholderDecoration = document.createElement('span');
@@ -67,11 +76,34 @@ function createPlaceHolderStateFrom(isEditorFocused, editorState, isTypeAheadOpe
67
76
  if (defaultPlaceholderText && (0, _utils.isEmptyDocument)(editorState.doc)) {
68
77
  return setPlaceHolderState(defaultPlaceholderText);
69
78
  }
79
+ if ((0, _experiments.editorExperiment)('platform_editor_controls', 'variant1')) {
80
+ var _parentNode$firstChil;
81
+ var _editorState$selectio = editorState.selection,
82
+ $from = _editorState$selectio.$from,
83
+ $to = _editorState$selectio.$to;
84
+ if ($from.pos !== $to.pos) {
85
+ return emptyPlaceholder(defaultPlaceholderText);
86
+ }
87
+ var isEmptyLine = (0, _utils.isEmptyParagraph)($from.parent);
88
+ var parentNode = $from.node($from.depth - 1);
89
+ var parentType = parentNode === null || parentNode === void 0 ? void 0 : parentNode.type.name;
90
+ if (parentType === 'doc' && isEmptyLine) {
91
+ return setPlaceHolderState(EMPTY_LINE_PLACEHOLDER_TEXT, $from.pos);
92
+ }
93
+ 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;
94
+ if (nodeTypesWithShortPlaceholderText.includes(parentType) && isEmptyNode) {
95
+ return setPlaceHolderState(SHORT_NODE_PLACEHOLDER_TEXT, $from.pos);
96
+ }
97
+ if (nodeTypesWithLongPlaceholderText.includes(parentType) && isEmptyNode) {
98
+ return setPlaceHolderState(NODE_PLACEHOLDER_TEXT, $from.pos);
99
+ }
100
+ return emptyPlaceholder(defaultPlaceholderText);
101
+ }
70
102
  if (bracketPlaceholderText && (0, _utils.bracketTyped)(editorState) && isEditorFocused) {
71
- var $from = editorState.selection.$from;
103
+ var _$from = editorState.selection.$from;
72
104
  // Space is to account for positioning of the bracket
73
105
  var bracketHint = ' ' + bracketPlaceholderText;
74
- return setPlaceHolderState(bracketHint, $from.pos - 1);
106
+ return setPlaceHolderState(bracketHint, _$from.pos - 1);
75
107
  }
76
108
  return emptyPlaceholder(defaultPlaceholderText);
77
109
  }
package/dist/es2019/placeholderPlugin.js CHANGED
@@ -1,12 +1,20 @@
1
1
  import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
2
- import { bracketTyped, browser, isEmptyDocument } from '@atlaskit/editor-common/utils';
2
+ import { bracketTyped, browser, isEmptyDocument, isEmptyParagraph } from '@atlaskit/editor-common/utils';
3
3
  import { PluginKey } from '@atlaskit/editor-prosemirror/state';
4
4
  import { Decoration, DecorationSet } from '@atlaskit/editor-prosemirror/view';
5
+ import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
5
6
  export const pluginKey = new PluginKey('placeholderPlugin');
6
7
  function getPlaceholderState(editorState) {
7
8
  return pluginKey.getState(editorState);
8
9
  }
9
10
  export const placeholderTestId = 'placeholder-test-id';
11
+
12
+ // TODO: Use i18n for new placeholders
13
+ export const SHORT_NODE_PLACEHOLDER_TEXT = '/ to insert';
14
+ export const NODE_PLACEHOLDER_TEXT = 'Type "/" to insert elements';
15
+ export const EMPTY_LINE_PLACEHOLDER_TEXT = 'Select + or type “/” to insert elements';
16
+ export const nodeTypesWithLongPlaceholderText = ['expand', 'panel'];
17
+ export const nodeTypesWithShortPlaceholderText = ['tableCell', 'tableHeader'];
10
18
  export function createPlaceholderDecoration(editorState, placeholderText, pos = 1) {
11
19
  const placeholderDecoration = document.createElement('span');
12
20
  let placeholderNodeWithText = placeholderDecoration;
@@ -56,6 +64,30 @@ function createPlaceHolderStateFrom(isEditorFocused, editorState, isTypeAheadOpe
56
64
  if (defaultPlaceholderText && isEmptyDocument(editorState.doc)) {
57
65
  return setPlaceHolderState(defaultPlaceholderText);
58
66
  }
67
+ if (editorExperiment('platform_editor_controls', 'variant1')) {
68
+ var _parentNode$firstChil;
69
+ const {
70
+ $from,
71
+ $to
72
+ } = editorState.selection;
73
+ if ($from.pos !== $to.pos) {
74
+ return emptyPlaceholder(defaultPlaceholderText);
75
+ }
76
+ const isEmptyLine = isEmptyParagraph($from.parent);
77
+ const parentNode = $from.node($from.depth - 1);
78
+ const parentType = parentNode === null || parentNode === void 0 ? void 0 : parentNode.type.name;
79
+ if (parentType === 'doc' && isEmptyLine) {
80
+ return setPlaceHolderState(EMPTY_LINE_PLACEHOLDER_TEXT, $from.pos);
81
+ }
82
+ 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;
83
+ if (nodeTypesWithShortPlaceholderText.includes(parentType) && isEmptyNode) {
84
+ return setPlaceHolderState(SHORT_NODE_PLACEHOLDER_TEXT, $from.pos);
85
+ }
86
+ if (nodeTypesWithLongPlaceholderText.includes(parentType) && isEmptyNode) {
87
+ return setPlaceHolderState(NODE_PLACEHOLDER_TEXT, $from.pos);
88
+ }
89
+ return emptyPlaceholder(defaultPlaceholderText);
90
+ }
59
91
  if (bracketPlaceholderText && bracketTyped(editorState) && isEditorFocused) {
60
92
  const {
61
93
  $from
package/dist/esm/placeholderPlugin.js CHANGED
@@ -1,12 +1,20 @@
1
1
  import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
2
- import { bracketTyped, browser, isEmptyDocument } from '@atlaskit/editor-common/utils';
2
+ import { bracketTyped, browser, isEmptyDocument, isEmptyParagraph } from '@atlaskit/editor-common/utils';
3
3
  import { PluginKey } from '@atlaskit/editor-prosemirror/state';
4
4
  import { Decoration, DecorationSet } from '@atlaskit/editor-prosemirror/view';
5
+ import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
5
6
  export var pluginKey = new PluginKey('placeholderPlugin');
6
7
  function getPlaceholderState(editorState) {
7
8
  return pluginKey.getState(editorState);
8
9
  }
9
10
  export var placeholderTestId = 'placeholder-test-id';
11
+
12
+ // TODO: Use i18n for new placeholders
13
+ export var SHORT_NODE_PLACEHOLDER_TEXT = '/ to insert';
14
+ export var NODE_PLACEHOLDER_TEXT = 'Type "/" to insert elements';
15
+ export var EMPTY_LINE_PLACEHOLDER_TEXT = 'Select + or type “/” to insert elements';
16
+ export var nodeTypesWithLongPlaceholderText = ['expand', 'panel'];
17
+ export var nodeTypesWithShortPlaceholderText = ['tableCell', 'tableHeader'];
10
18
  export function createPlaceholderDecoration(editorState, placeholderText) {
11
19
  var pos = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 1;
12
20
  var placeholderDecoration = document.createElement('span');
@@ -59,11 +67,34 @@ function createPlaceHolderStateFrom(isEditorFocused, editorState, isTypeAheadOpe
59
67
  if (defaultPlaceholderText && isEmptyDocument(editorState.doc)) {
60
68
  return setPlaceHolderState(defaultPlaceholderText);
61
69
  }
70
+ if (editorExperiment('platform_editor_controls', 'variant1')) {
71
+ var _parentNode$firstChil;
72
+ var _editorState$selectio = editorState.selection,
73
+ $from = _editorState$selectio.$from,
74
+ $to = _editorState$selectio.$to;
75
+ if ($from.pos !== $to.pos) {
76
+ return emptyPlaceholder(defaultPlaceholderText);
77
+ }
78
+ var isEmptyLine = isEmptyParagraph($from.parent);
79
+ var parentNode = $from.node($from.depth - 1);
80
+ var parentType = parentNode === null || parentNode === void 0 ? void 0 : parentNode.type.name;
81
+ if (parentType === 'doc' && isEmptyLine) {
82
+ return setPlaceHolderState(EMPTY_LINE_PLACEHOLDER_TEXT, $from.pos);
83
+ }
84
+ 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;
85
+ if (nodeTypesWithShortPlaceholderText.includes(parentType) && isEmptyNode) {
86
+ return setPlaceHolderState(SHORT_NODE_PLACEHOLDER_TEXT, $from.pos);
87
+ }
88
+ if (nodeTypesWithLongPlaceholderText.includes(parentType) && isEmptyNode) {
89
+ return setPlaceHolderState(NODE_PLACEHOLDER_TEXT, $from.pos);
90
+ }
91
+ return emptyPlaceholder(defaultPlaceholderText);
92
+ }
62
93
  if (bracketPlaceholderText && bracketTyped(editorState) && isEditorFocused) {
63
- var $from = editorState.selection.$from;
94
+ var _$from = editorState.selection.$from;
64
95
  // Space is to account for positioning of the bracket
65
96
  var bracketHint = ' ' + bracketPlaceholderText;
66
- return setPlaceHolderState(bracketHint, $from.pos - 1);
97
+ return setPlaceHolderState(bracketHint, _$from.pos - 1);
67
98
  }
68
99
  return emptyPlaceholder(defaultPlaceholderText);
69
100
  }
package/dist/types/placeholderPlugin.d.ts CHANGED
@@ -6,6 +6,11 @@ import { DecorationSet } from '@atlaskit/editor-prosemirror/view';
6
6
  import type { PlaceholderPlugin } from './placeholderPluginType';
7
7
  export declare const pluginKey: PluginKey<any>;
8
8
  export declare const placeholderTestId = "placeholder-test-id";
9
+ export declare const SHORT_NODE_PLACEHOLDER_TEXT = "/ to insert";
10
+ export declare const NODE_PLACEHOLDER_TEXT = "Type \"/\" to insert elements";
11
+ export declare const EMPTY_LINE_PLACEHOLDER_TEXT = "Select + or type \u201C/\u201D to insert elements";
12
+ export declare const nodeTypesWithLongPlaceholderText: string[];
13
+ export declare const nodeTypesWithShortPlaceholderText: string[];
9
14
  export declare function createPlaceholderDecoration(editorState: EditorState, placeholderText: string, pos?: number): DecorationSet;
10
15
  export declare function createPlugin(defaultPlaceholderText?: string, bracketPlaceholderText?: string, api?: ExtractInjectionAPI<PlaceholderPlugin>): SafePlugin | undefined;
11
16
  export declare const placeholderPlugin: PlaceholderPlugin;
package/dist/types-ts4.5/placeholderPlugin.d.ts CHANGED
@@ -6,6 +6,11 @@ import { DecorationSet } from '@atlaskit/editor-prosemirror/view';
6
6
  import type { PlaceholderPlugin } from './placeholderPluginType';
7
7
  export declare const pluginKey: PluginKey<any>;
8
8
  export declare const placeholderTestId = "placeholder-test-id";
9
+ export declare const SHORT_NODE_PLACEHOLDER_TEXT = "/ to insert";
10
+ export declare const NODE_PLACEHOLDER_TEXT = "Type \"/\" to insert elements";
11
+ export declare const EMPTY_LINE_PLACEHOLDER_TEXT = "Select + or type \u201C/\u201D to insert elements";
12
+ export declare const nodeTypesWithLongPlaceholderText: string[];
13
+ export declare const nodeTypesWithShortPlaceholderText: string[];
9
14
  export declare function createPlaceholderDecoration(editorState: EditorState, placeholderText: string, pos?: number): DecorationSet;
10
15
  export declare function createPlugin(defaultPlaceholderText?: string, bracketPlaceholderText?: string, api?: ExtractInjectionAPI<PlaceholderPlugin>): SafePlugin | undefined;
11
16
  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.1",
3
+ "version": "2.0.2",
4
4
  "description": "Placeholder plugin for @atlaskit/editor-core.",
5
5
  "author": "Atlassian Pty Ltd",
6
6
  "license": "Apache-2.0",
@@ -31,11 +31,12 @@
31
31
  ".": "./src/index.ts"
32
32
  },
33
33
  "dependencies": {
34
- "@atlaskit/editor-common": "^101.0.0",
34
+ "@atlaskit/editor-common": "^101.1.0",
35
35
  "@atlaskit/editor-plugin-composition": "^1.3.0",
36
36
  "@atlaskit/editor-plugin-focus": "^1.5.0",
37
37
  "@atlaskit/editor-plugin-type-ahead": "^2.1.0",
38
38
  "@atlaskit/editor-prosemirror": "7.0.0",
39
+ "@atlaskit/tmp-editor-statsig": "^3.4.0",
39
40
  "@babel/runtime": "^7.0.0"
40
41
  },
41
42
  "peerDependencies": {