@atlaskit/editor-plugin-block-controls 2.0.4 → 2.0.6

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 (5) hide show
  1. package/CHANGELOG.md +17 -0
  2. package/dist/cjs/ui/empty-block-experiment/widget.js +30 -7
  3. package/dist/es2019/ui/empty-block-experiment/widget.js +28 -7
  4. package/dist/esm/ui/empty-block-experiment/widget.js +29 -7
  5. package/package.json +5 -2
package/CHANGELOG.md CHANGED
@@ -1,5 +1,22 @@
1
1
  # @atlaskit/editor-plugin-block-controls
2
2
 
3
+ ## 2.0.6
4
+
5
+ ### Patch Changes
6
+
7
+ - [#142709](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/142709)
8
+ [`7ca7608c6b4c8`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/7ca7608c6b4c8) -
9
+ [ux] ED-24883 Fixed bug which caused empty line prompt button to jump around in Firefox
10
+ - Updated dependencies
11
+
12
+ ## 2.0.5
13
+
14
+ ### Patch Changes
15
+
16
+ - [#142267](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/142267)
17
+ [`9ed8707898875`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/9ed8707898875) -
18
+ [ux] ED-24996 Delay appearance of line prompt quickinsert button
19
+
3
20
  ## 2.0.4
4
21
 
5
22
  ### Patch Changes
package/dist/cjs/ui/empty-block-experiment/widget.js CHANGED
@@ -6,7 +6,9 @@ Object.defineProperty(exports, "__esModule", {
6
6
  value: true
7
7
  });
8
8
  exports.createEmptyBlockWidgetDecoration = exports.TypeAheadControl = void 0;
9
+ var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
9
10
  var _react = _interopRequireWildcard(require("react"));
11
+ var _react2 = require("@emotion/react");
10
12
  var _reactDom = _interopRequireDefault(require("react-dom"));
11
13
  var _reactIntlNext = require("react-intl-next");
12
14
  var _keymaps = require("@atlaskit/editor-common/keymaps");
@@ -15,15 +17,32 @@ var _whitespace = require("@atlaskit/editor-common/whitespace");
15
17
  var _state = require("@atlaskit/editor-prosemirror/state");
16
18
  var _view2 = require("@atlaskit/editor-prosemirror/view");
17
19
  var _add = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/add"));
20
+ var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
18
21
  var _primitives = require("@atlaskit/primitives");
19
22
  var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
20
23
  function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
21
24
  function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
25
+ /* eslint-disable @atlaskit/ui-styling-standard/use-compiled */
26
+
22
27
  var wrapperStyles = (0, _primitives.xcss)({
23
28
  position: 'absolute',
24
29
  top: "calc('50%' - ".concat("var(--ds-space-150, 12px)", ")"),
25
30
  left: "calc(".concat("var(--ds-space-negative-300, -24px)", " + ", "var(--ds-space-negative-100, -8px)", ")")
26
31
  });
32
+ var appear = (0, _react2.keyframes)({
33
+ from: {
34
+ visibility: 'hidden'
35
+ },
36
+ to: {
37
+ visibility: 'visible'
38
+ }
39
+ });
40
+ var delayedAppearance = (0, _primitives.xcss)({
41
+ visibility: 'hidden',
42
+ animation: "".concat(appear, " 0.1s"),
43
+ animationDelay: '2s',
44
+ animationFillMode: 'forwards'
45
+ });
27
46
  var buttonStyles = (0, _primitives.xcss)({
28
47
  boxSizing: 'border-box',
29
48
  display: 'flex',
@@ -53,7 +72,8 @@ var TypeAheadControl = exports.TypeAheadControl = function TypeAheadControl(_ref
53
72
  getPos = _ref.getPos,
54
73
  formatMessage = _ref.intl.formatMessage;
55
74
  return /*#__PURE__*/_react.default.createElement(_primitives.Box, {
56
- xcss: [wrapperStyles]
75
+ xcss: [wrapperStyles],
76
+ testId: "editor-empty-line-prompt-experiment"
57
77
  }, /*#__PURE__*/_react.default.createElement(_tooltip.default, {
58
78
  content: /*#__PURE__*/_react.default.createElement(_keymaps.ToolTipContent, {
59
79
  description: formatMessage(_messages.blockControlsMessages.insert),
@@ -62,7 +82,7 @@ var TypeAheadControl = exports.TypeAheadControl = function TypeAheadControl(_ref
62
82
  }, /*#__PURE__*/_react.default.createElement(_primitives.Pressable, {
63
83
  type: "button",
64
84
  "aria-label": formatMessage(_messages.blockControlsMessages.insert),
65
- xcss: [buttonStyles],
85
+ xcss: [buttonStyles].concat((0, _toConsumableArray2.default)((0, _platformFeatureFlags.fg)('platform_editor_empty_line_prompt_delay') ? [delayedAppearance] : [])),
66
86
  onClick: function onClick() {
67
87
  var _api$core, _api$quickInsert;
68
88
  api === null || api === void 0 || (_api$core = api.core) === null || _api$core === void 0 || _api$core.actions.execute(function (_ref2) {
@@ -82,11 +102,14 @@ var TypeAheadControl = exports.TypeAheadControl = function TypeAheadControl(_ref
82
102
  };
83
103
  var TypeAheadControlWithIntl = (0, _reactIntlNext.injectIntl)(TypeAheadControl);
84
104
  var toDOM = function toDOM(api, getPos, getIntl) {
105
+ var wrapper = document.createElement('span');
106
+ wrapper.contentEditable = 'false';
107
+ wrapper.setAttribute('data-empty-block-experiment', 'true');
108
+ wrapper.setAttribute('class', 'empty-block-experiment');
85
109
  var element = document.createElement('span');
86
110
  element.contentEditable = 'false';
87
- element.setAttribute('style', 'position: relative');
88
- element.setAttribute('class', 'empty-block-experiment');
89
- element.setAttribute('data-empty-block-experiment', 'true');
111
+ element.setAttribute('style', 'position: absolute;');
112
+ wrapper.appendChild(element);
90
113
  _reactDom.default.render( /*#__PURE__*/(0, _react.createElement)(_reactIntlNext.RawIntlProvider, {
91
114
  value: getIntl()
92
115
  }, /*#__PURE__*/(0, _react.createElement)(TypeAheadControlWithIntl, {
@@ -98,8 +121,8 @@ var toDOM = function toDOM(api, getPos, getIntl) {
98
121
  // // Cursor height cannot be controlled via CSS and is handled by the browser.
99
122
  // // see Prosemirror forum: https://discuss.prosemirror.net/t/chrome-caret-cursor-larger-than-the-text-with-inlined-items/5946
100
123
  var cursorHack = document.createTextNode(_whitespace.ZERO_WIDTH_SPACE);
101
- element.appendChild(cursorHack);
102
- return element;
124
+ wrapper.appendChild(cursorHack);
125
+ return wrapper;
103
126
  };
104
127
  var createEmptyBlockWidgetDecoration = exports.createEmptyBlockWidgetDecoration = function createEmptyBlockWidgetDecoration(selection, api, getIntl) {
105
128
  if (selection instanceof _state.TextSelection && selection.$cursor) {
package/dist/es2019/ui/empty-block-experiment/widget.js CHANGED
@@ -1,4 +1,6 @@
1
+ /* eslint-disable @atlaskit/ui-styling-standard/use-compiled */
1
2
  import React, { createElement } from 'react';
3
+ import { keyframes } from '@emotion/react';
2
4
  import ReactDOM from 'react-dom';
3
5
  import { injectIntl, RawIntlProvider } from 'react-intl-next';
4
6
  import { ToolTipContent } from '@atlaskit/editor-common/keymaps';
@@ -7,6 +9,7 @@ import { ZERO_WIDTH_SPACE } from '@atlaskit/editor-common/whitespace';
7
9
  import { TextSelection } from '@atlaskit/editor-prosemirror/state';
8
10
  import { Decoration } from '@atlaskit/editor-prosemirror/view';
9
11
  import EditorAddIcon from '@atlaskit/icon/glyph/editor/add';
12
+ import { fg } from '@atlaskit/platform-feature-flags';
10
13
  import { Box, Pressable, xcss } from '@atlaskit/primitives';
11
14
  import Tooltip from '@atlaskit/tooltip';
12
15
  const wrapperStyles = xcss({
@@ -14,6 +17,20 @@ const wrapperStyles = xcss({
14
17
  top: `calc('50%' - ${"var(--ds-space-150, 12px)"})`,
15
18
  left: `calc(${"var(--ds-space-negative-300, -24px)"} + ${"var(--ds-space-negative-100, -8px)"})`
16
19
  });
20
+ const appear = keyframes({
21
+ from: {
22
+ visibility: 'hidden'
23
+ },
24
+ to: {
25
+ visibility: 'visible'
26
+ }
27
+ });
28
+ const delayedAppearance = xcss({
29
+ visibility: 'hidden',
30
+ animation: `${appear} 0.1s`,
31
+ animationDelay: '2s',
32
+ animationFillMode: 'forwards'
33
+ });
17
34
  const buttonStyles = xcss({
18
35
  boxSizing: 'border-box',
19
36
  display: 'flex',
@@ -46,7 +63,8 @@ export const TypeAheadControl = ({
46
63
  }
47
64
  }) => {
48
65
  return /*#__PURE__*/React.createElement(Box, {
49
- xcss: [wrapperStyles]
66
+ xcss: [wrapperStyles],
67
+ testId: "editor-empty-line-prompt-experiment"
50
68
  }, /*#__PURE__*/React.createElement(Tooltip, {
51
69
  content: /*#__PURE__*/React.createElement(ToolTipContent, {
52
70
  description: formatMessage(messages.insert),
@@ -55,7 +73,7 @@ export const TypeAheadControl = ({
55
73
  }, /*#__PURE__*/React.createElement(Pressable, {
56
74
  type: "button",
57
75
  "aria-label": formatMessage(messages.insert),
58
- xcss: [buttonStyles],
76
+ xcss: [buttonStyles, ...(fg('platform_editor_empty_line_prompt_delay') ? [delayedAppearance] : [])],
59
77
  onClick: () => {
60
78
  var _api$core, _api$quickInsert;
61
79
  api === null || api === void 0 ? void 0 : (_api$core = api.core) === null || _api$core === void 0 ? void 0 : _api$core.actions.execute(({
@@ -76,11 +94,14 @@ export const TypeAheadControl = ({
76
94
  };
77
95
  const TypeAheadControlWithIntl = injectIntl(TypeAheadControl);
78
96
  const toDOM = (api, getPos, getIntl) => {
97
+ const wrapper = document.createElement('span');
98
+ wrapper.contentEditable = 'false';
99
+ wrapper.setAttribute('data-empty-block-experiment', 'true');
100
+ wrapper.setAttribute('class', 'empty-block-experiment');
79
101
  const element = document.createElement('span');
80
102
  element.contentEditable = 'false';
81
- element.setAttribute('style', 'position: relative');
82
- element.setAttribute('class', 'empty-block-experiment');
83
- element.setAttribute('data-empty-block-experiment', 'true');
103
+ element.setAttribute('style', 'position: absolute;');
104
+ wrapper.appendChild(element);
84
105
  ReactDOM.render( /*#__PURE__*/createElement(RawIntlProvider, {
85
106
  value: getIntl()
86
107
  }, /*#__PURE__*/createElement(TypeAheadControlWithIntl, {
@@ -92,8 +113,8 @@ const toDOM = (api, getPos, getIntl) => {
92
113
  // // Cursor height cannot be controlled via CSS and is handled by the browser.
93
114
  // // see Prosemirror forum: https://discuss.prosemirror.net/t/chrome-caret-cursor-larger-than-the-text-with-inlined-items/5946
94
115
  const cursorHack = document.createTextNode(ZERO_WIDTH_SPACE);
95
- element.appendChild(cursorHack);
96
- return element;
116
+ wrapper.appendChild(cursorHack);
117
+ return wrapper;
97
118
  };
98
119
  export const createEmptyBlockWidgetDecoration = (selection, api, getIntl) => {
99
120
  if (selection instanceof TextSelection && selection.$cursor) {
package/dist/esm/ui/empty-block-experiment/widget.js CHANGED
@@ -1,4 +1,7 @@
1
+ import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
2
+ /* eslint-disable @atlaskit/ui-styling-standard/use-compiled */
1
3
  import React, { createElement } from 'react';
4
+ import { keyframes } from '@emotion/react';
2
5
  import ReactDOM from 'react-dom';
3
6
  import { injectIntl, RawIntlProvider } from 'react-intl-next';
4
7
  import { ToolTipContent } from '@atlaskit/editor-common/keymaps';
@@ -7,6 +10,7 @@ import { ZERO_WIDTH_SPACE } from '@atlaskit/editor-common/whitespace';
7
10
  import { TextSelection } from '@atlaskit/editor-prosemirror/state';
8
11
  import { Decoration } from '@atlaskit/editor-prosemirror/view';
9
12
  import EditorAddIcon from '@atlaskit/icon/glyph/editor/add';
13
+ import { fg } from '@atlaskit/platform-feature-flags';
10
14
  import { Box, Pressable, xcss } from '@atlaskit/primitives';
11
15
  import Tooltip from '@atlaskit/tooltip';
12
16
  var wrapperStyles = xcss({
@@ -14,6 +18,20 @@ var wrapperStyles = xcss({
14
18
  top: "calc('50%' - ".concat("var(--ds-space-150, 12px)", ")"),
15
19
  left: "calc(".concat("var(--ds-space-negative-300, -24px)", " + ", "var(--ds-space-negative-100, -8px)", ")")
16
20
  });
21
+ var appear = keyframes({
22
+ from: {
23
+ visibility: 'hidden'
24
+ },
25
+ to: {
26
+ visibility: 'visible'
27
+ }
28
+ });
29
+ var delayedAppearance = xcss({
30
+ visibility: 'hidden',
31
+ animation: "".concat(appear, " 0.1s"),
32
+ animationDelay: '2s',
33
+ animationFillMode: 'forwards'
34
+ });
17
35
  var buttonStyles = xcss({
18
36
  boxSizing: 'border-box',
19
37
  display: 'flex',
@@ -43,7 +61,8 @@ export var TypeAheadControl = function TypeAheadControl(_ref) {
43
61
  getPos = _ref.getPos,
44
62
  formatMessage = _ref.intl.formatMessage;
45
63
  return /*#__PURE__*/React.createElement(Box, {
46
- xcss: [wrapperStyles]
64
+ xcss: [wrapperStyles],
65
+ testId: "editor-empty-line-prompt-experiment"
47
66
  }, /*#__PURE__*/React.createElement(Tooltip, {
48
67
  content: /*#__PURE__*/React.createElement(ToolTipContent, {
49
68
  description: formatMessage(messages.insert),
@@ -52,7 +71,7 @@ export var TypeAheadControl = function TypeAheadControl(_ref) {
52
71
  }, /*#__PURE__*/React.createElement(Pressable, {
53
72
  type: "button",
54
73
  "aria-label": formatMessage(messages.insert),
55
- xcss: [buttonStyles],
74
+ xcss: [buttonStyles].concat(_toConsumableArray(fg('platform_editor_empty_line_prompt_delay') ? [delayedAppearance] : [])),
56
75
  onClick: function onClick() {
57
76
  var _api$core, _api$quickInsert;
58
77
  api === null || api === void 0 || (_api$core = api.core) === null || _api$core === void 0 || _api$core.actions.execute(function (_ref2) {
@@ -72,11 +91,14 @@ export var TypeAheadControl = function TypeAheadControl(_ref) {
72
91
  };
73
92
  var TypeAheadControlWithIntl = injectIntl(TypeAheadControl);
74
93
  var toDOM = function toDOM(api, getPos, getIntl) {
94
+ var wrapper = document.createElement('span');
95
+ wrapper.contentEditable = 'false';
96
+ wrapper.setAttribute('data-empty-block-experiment', 'true');
97
+ wrapper.setAttribute('class', 'empty-block-experiment');
75
98
  var element = document.createElement('span');
76
99
  element.contentEditable = 'false';
77
- element.setAttribute('style', 'position: relative');
78
- element.setAttribute('class', 'empty-block-experiment');
79
- element.setAttribute('data-empty-block-experiment', 'true');
100
+ element.setAttribute('style', 'position: absolute;');
101
+ wrapper.appendChild(element);
80
102
  ReactDOM.render( /*#__PURE__*/createElement(RawIntlProvider, {
81
103
  value: getIntl()
82
104
  }, /*#__PURE__*/createElement(TypeAheadControlWithIntl, {
@@ -88,8 +110,8 @@ var toDOM = function toDOM(api, getPos, getIntl) {
88
110
  // // Cursor height cannot be controlled via CSS and is handled by the browser.
89
111
  // // see Prosemirror forum: https://discuss.prosemirror.net/t/chrome-caret-cursor-larger-than-the-text-with-inlined-items/5946
90
112
  var cursorHack = document.createTextNode(ZERO_WIDTH_SPACE);
91
- element.appendChild(cursorHack);
92
- return element;
113
+ wrapper.appendChild(cursorHack);
114
+ return wrapper;
93
115
  };
94
116
  export var createEmptyBlockWidgetDecoration = function createEmptyBlockWidgetDecoration(selection, api, getIntl) {
95
117
  if (selection instanceof TextSelection && selection.$cursor) {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-plugin-block-controls",
3
- "version": "2.0.4",
3
+ "version": "2.0.6",
4
4
  "description": "Block controls plugin for @atlaskit/editor-core",
5
5
  "author": "Atlassian Pty Ltd",
6
6
  "license": "Apache-2.0",
@@ -35,7 +35,7 @@
35
35
  "@atlaskit/editor-plugin-analytics": "^1.8.0",
36
36
  "@atlaskit/editor-plugin-editor-disabled": "^1.3.0",
37
37
  "@atlaskit/editor-plugin-feature-flags": "^1.2.0",
38
- "@atlaskit/editor-plugin-quick-insert": "^1.3.0",
38
+ "@atlaskit/editor-plugin-quick-insert": "^1.4.0",
39
39
  "@atlaskit/editor-plugin-width": "^1.3.0",
40
40
  "@atlaskit/editor-prosemirror": "6.0.0",
41
41
  "@atlaskit/editor-shared-styles": "^2.13.0",
@@ -131,6 +131,9 @@
131
131
  },
132
132
  "platform_editor_element_drag_and_drop_ed_24885": {
133
133
  "type": "boolean"
134
+ },
135
+ "platform_editor_empty_line_prompt_delay": {
136
+ "type": "boolean"
134
137
  }
135
138
  }
136
139
  }