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

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlaskit/editor-plugin-block-controls
 
+## 2.0.5
+
+### Patch Changes
+
+- [#142267](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/142267)
+  [`9ed8707898875`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/9ed8707898875) -
+  [ux] ED-24996 Delay appearance of line prompt quickinsert button
+
 ## 2.0.4
 
 ### Patch Changes

package/dist/cjs/ui/empty-block-experiment/widget.js

@@ -6,7 +6,9 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.createEmptyBlockWidgetDecoration = exports.TypeAheadControl = void 0;
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _react = _interopRequireWildcard(require("react"));
+var _react2 = require("@emotion/react");
 var _reactDom = _interopRequireDefault(require("react-dom"));
 var _reactIntlNext = require("react-intl-next");
 var _keymaps = require("@atlaskit/editor-common/keymaps");
@@ -15,15 +17,32 @@ var _whitespace = require("@atlaskit/editor-common/whitespace");
 var _state = require("@atlaskit/editor-prosemirror/state");
 var _view2 = require("@atlaskit/editor-prosemirror/view");
 var _add = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/add"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _primitives = require("@atlaskit/primitives");
 var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
 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); }
 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; }
+/* eslint-disable @atlaskit/ui-styling-standard/use-compiled */
+
 var wrapperStyles = (0, _primitives.xcss)({
   position: 'absolute',
   top: "calc('50%' - ".concat("var(--ds-space-150, 12px)", ")"),
   left: "calc(".concat("var(--ds-space-negative-300, -24px)", " + ", "var(--ds-space-negative-100, -8px)", ")")
 });
+var appear = (0, _react2.keyframes)({
+  from: {
+    visibility: 'hidden'
+  },
+  to: {
+    visibility: 'visible'
+  }
+});
+var delayedAppearance = (0, _primitives.xcss)({
+  visibility: 'hidden',
+  animation: "".concat(appear, " 0.1s"),
+  animationDelay: '2s',
+  animationFillMode: 'forwards'
+});
 var buttonStyles = (0, _primitives.xcss)({
   boxSizing: 'border-box',
   display: 'flex',
@@ -53,7 +72,8 @@ var TypeAheadControl = exports.TypeAheadControl = function TypeAheadControl(_ref
     getPos = _ref.getPos,
     formatMessage = _ref.intl.formatMessage;
   return /*#__PURE__*/_react.default.createElement(_primitives.Box, {
-    xcss: [wrapperStyles]
+    xcss: [wrapperStyles],
+    testId: "editor-empty-line-prompt-experiment"
   }, /*#__PURE__*/_react.default.createElement(_tooltip.default, {
     content: /*#__PURE__*/_react.default.createElement(_keymaps.ToolTipContent, {
       description: formatMessage(_messages.blockControlsMessages.insert),
@@ -62,7 +82,7 @@ var TypeAheadControl = exports.TypeAheadControl = function TypeAheadControl(_ref
   }, /*#__PURE__*/_react.default.createElement(_primitives.Pressable, {
     type: "button",
     "aria-label": formatMessage(_messages.blockControlsMessages.insert),
-    xcss: [buttonStyles],
+    xcss: [buttonStyles].concat((0, _toConsumableArray2.default)((0, _platformFeatureFlags.fg)('platform_editor_empty_line_prompt_delay') ? [delayedAppearance] : [])),
     onClick: function onClick() {
       var _api$core, _api$quickInsert;
       api === null || api === void 0 || (_api$core = api.core) === null || _api$core === void 0 || _api$core.actions.execute(function (_ref2) {

package/dist/es2019/ui/empty-block-experiment/widget.js

@@ -1,4 +1,6 @@
+/* eslint-disable @atlaskit/ui-styling-standard/use-compiled */
 import React, { createElement } from 'react';
+import { keyframes } from '@emotion/react';
 import ReactDOM from 'react-dom';
 import { injectIntl, RawIntlProvider } from 'react-intl-next';
 import { ToolTipContent } from '@atlaskit/editor-common/keymaps';
@@ -7,6 +9,7 @@ import { ZERO_WIDTH_SPACE } from '@atlaskit/editor-common/whitespace';
 import { TextSelection } from '@atlaskit/editor-prosemirror/state';
 import { Decoration } from '@atlaskit/editor-prosemirror/view';
 import EditorAddIcon from '@atlaskit/icon/glyph/editor/add';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { Box, Pressable, xcss } from '@atlaskit/primitives';
 import Tooltip from '@atlaskit/tooltip';
 const wrapperStyles = xcss({
@@ -14,6 +17,20 @@ const wrapperStyles = xcss({
   top: `calc('50%' - ${"var(--ds-space-150, 12px)"})`,
   left: `calc(${"var(--ds-space-negative-300, -24px)"} + ${"var(--ds-space-negative-100, -8px)"})`
 });
+const appear = keyframes({
+  from: {
+    visibility: 'hidden'
+  },
+  to: {
+    visibility: 'visible'
+  }
+});
+const delayedAppearance = xcss({
+  visibility: 'hidden',
+  animation: `${appear} 0.1s`,
+  animationDelay: '2s',
+  animationFillMode: 'forwards'
+});
 const buttonStyles = xcss({
   boxSizing: 'border-box',
   display: 'flex',
@@ -46,7 +63,8 @@ export const TypeAheadControl = ({
   }
 }) => {
   return /*#__PURE__*/React.createElement(Box, {
-    xcss: [wrapperStyles]
+    xcss: [wrapperStyles],
+    testId: "editor-empty-line-prompt-experiment"
   }, /*#__PURE__*/React.createElement(Tooltip, {
     content: /*#__PURE__*/React.createElement(ToolTipContent, {
       description: formatMessage(messages.insert),
@@ -55,7 +73,7 @@ export const TypeAheadControl = ({
   }, /*#__PURE__*/React.createElement(Pressable, {
     type: "button",
     "aria-label": formatMessage(messages.insert),
-    xcss: [buttonStyles],
+    xcss: [buttonStyles, ...(fg('platform_editor_empty_line_prompt_delay') ? [delayedAppearance] : [])],
     onClick: () => {
       var _api$core, _api$quickInsert;
       api === null || api === void 0 ? void 0 : (_api$core = api.core) === null || _api$core === void 0 ? void 0 : _api$core.actions.execute(({

package/dist/esm/ui/empty-block-experiment/widget.js

@@ -1,4 +1,7 @@
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+/* eslint-disable @atlaskit/ui-styling-standard/use-compiled */
 import React, { createElement } from 'react';
+import { keyframes } from '@emotion/react';
 import ReactDOM from 'react-dom';
 import { injectIntl, RawIntlProvider } from 'react-intl-next';
 import { ToolTipContent } from '@atlaskit/editor-common/keymaps';
@@ -7,6 +10,7 @@ import { ZERO_WIDTH_SPACE } from '@atlaskit/editor-common/whitespace';
 import { TextSelection } from '@atlaskit/editor-prosemirror/state';
 import { Decoration } from '@atlaskit/editor-prosemirror/view';
 import EditorAddIcon from '@atlaskit/icon/glyph/editor/add';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { Box, Pressable, xcss } from '@atlaskit/primitives';
 import Tooltip from '@atlaskit/tooltip';
 var wrapperStyles = xcss({
@@ -14,6 +18,20 @@ var wrapperStyles = xcss({
   top: "calc('50%' - ".concat("var(--ds-space-150, 12px)", ")"),
   left: "calc(".concat("var(--ds-space-negative-300, -24px)", " + ", "var(--ds-space-negative-100, -8px)", ")")
 });
+var appear = keyframes({
+  from: {
+    visibility: 'hidden'
+  },
+  to: {
+    visibility: 'visible'
+  }
+});
+var delayedAppearance = xcss({
+  visibility: 'hidden',
+  animation: "".concat(appear, " 0.1s"),
+  animationDelay: '2s',
+  animationFillMode: 'forwards'
+});
 var buttonStyles = xcss({
   boxSizing: 'border-box',
   display: 'flex',
@@ -43,7 +61,8 @@ export var TypeAheadControl = function TypeAheadControl(_ref) {
     getPos = _ref.getPos,
     formatMessage = _ref.intl.formatMessage;
   return /*#__PURE__*/React.createElement(Box, {
-    xcss: [wrapperStyles]
+    xcss: [wrapperStyles],
+    testId: "editor-empty-line-prompt-experiment"
   }, /*#__PURE__*/React.createElement(Tooltip, {
     content: /*#__PURE__*/React.createElement(ToolTipContent, {
       description: formatMessage(messages.insert),
@@ -52,7 +71,7 @@ export var TypeAheadControl = function TypeAheadControl(_ref) {
   }, /*#__PURE__*/React.createElement(Pressable, {
     type: "button",
     "aria-label": formatMessage(messages.insert),
-    xcss: [buttonStyles],
+    xcss: [buttonStyles].concat(_toConsumableArray(fg('platform_editor_empty_line_prompt_delay') ? [delayedAppearance] : [])),
     onClick: function onClick() {
       var _api$core, _api$quickInsert;
       api === null || api === void 0 || (_api$core = api.core) === null || _api$core === void 0 || _api$core.actions.execute(function (_ref2) {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-block-controls",
-	"version": "2.0.4",
+	"version": "2.0.5",
 	"description": "Block controls plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -131,6 +131,9 @@
 		},
 		"platform_editor_element_drag_and_drop_ed_24885": {
 			"type": "boolean"
+		},
+		"platform_editor_empty_line_prompt_delay": {
+			"type": "boolean"
 		}
 	}
 }