@atlaskit/editor-plugin-type-ahead 2.3.2 → 2.3.3

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @atlaskit/editor-plugin-type-ahead
 
+## 2.3.3
+
+### Patch Changes
+
+- [#135872](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/135872)
+  [`d50ea6acabdb3`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/d50ea6acabdb3) -
+  [ux] [ED-27142] Enable quick insert input placeholder
+- Updated dependencies
+
 ## 2.3.2
 
 ### Patch Changes

package/dist/cjs/pm-plugins/decorations.js

@@ -14,7 +14,6 @@ var _state = require("@atlaskit/editor-prosemirror/state");
 var _view = require("@atlaskit/editor-prosemirror/view");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _colors = require("@atlaskit/theme/colors");
-var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _WrapperTypeAhead = require("../ui/WrapperTypeAhead");
 var _closeTypeAhead = require("./commands/close-type-ahead");
 var _constants = require("./constants");
@@ -64,11 +63,6 @@ var factoryDecorations = exports.factoryDecorations = function factoryDecoration
       typeaheadComponent.dataset.typeAhead = _constants.TYPE_AHEAD_DECORATION_DATA_ATTRIBUTE;
       typeaheadComponent.style.color = "var(--ds-text-accent-blue, ".concat(_colors.B400, ")");
       typeaheadComponent.style.backgroundColor = 'transparent';
-      if ((0, _experiments.editorExperiment)('platform_editor_insertion', 'variant1')) {
-        // As part of controls work, we add placeholder `Search` to quick insert command
-        // This style is to prevent `/Search` being wrapped if it's triggered at the end of the line
-        typeaheadComponent.style.whiteSpace = 'nowrap';
-      }
       var onUndoRedo = function onUndoRedo(inputType) {
         if (!['historyUndo', 'historyRedo'].includes(inputType)) {
           return false;

package/dist/cjs/ui/InputQuery.js

@@ -14,11 +14,12 @@ var _w3cKeyname = require("w3c-keyname");
 var _browser = require("@atlaskit/editor-common/browser");
 var _typeAhead = require("@atlaskit/editor-common/type-ahead");
 var _ui = require("@atlaskit/editor-common/ui");
+var _utils = require("@atlaskit/editor-prosemirror/utils");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _constants = require("../pm-plugins/constants");
-var _utils = require("../pm-plugins/utils");
+var _utils2 = require("../pm-plugins/utils");
 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; }
 /**
@@ -109,9 +110,15 @@ var InputQuery = exports.InputQuery = /*#__PURE__*/_react.default.memo(function
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     query = _useState2[0],
     setQuery = _useState2[1];
-  var isEditorControlsEnabled = (0, _experiments.editorExperiment)('platform_editor_insertion', 'variant1');
+  var isEditorInsertionEnabled = (0, _experiments.editorExperiment)('platform_editor_insertion', 'variant1');
   var isEditorControlsPatch2Enabled = (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') && (0, _platformFeatureFlags.fg)('platform_editor_controls_patch_2');
-  var _useState3 = (0, _react.useState)(isEditorControlsEnabled && triggerQueryPrefix === '/'),
+  var isSearchPlaceholderEnabled = isEditorInsertionEnabled || (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') && (0, _platformFeatureFlags.fg)('platform_editor_controls_patch_3');
+  var selection = editorView.state.selection;
+  var table = editorView.state.schema.nodes.table;
+  var _useState3 = (0, _react.useState)(isSearchPlaceholderEnabled && triggerQueryPrefix === '/' &&
+    // When triggered in very narrow table column, placeholder becomes ellipsis only
+    // hence we disable it for now and revisit this scenario in ED-27480
+    !(0, _utils.findParentNodeOfType)(table)(selection)),
     _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
     showPlaceholder = _useState4[0],
     setShowPlaceholder = _useState4[1];
@@ -140,7 +147,7 @@ var InputQuery = exports.InputQuery = /*#__PURE__*/_react.default.memo(function
     var raw = ((_ref$current2 = ref.current) === null || _ref$current2 === void 0 ? void 0 : _ref$current2.textContent) || '';
     var text = cleanedInputContent();
     var stopDefault = false;
-    var _ref2 = (0, _utils.getPluginState)(editorView.state) || {},
+    var _ref2 = (0, _utils2.getPluginState)(editorView.state) || {},
       selectedIndex = _ref2.selectedIndex,
       removePrefixTriggerOnCancel = _ref2.removePrefixTriggerOnCancel;
     setInFocus(true);
@@ -250,7 +257,7 @@ var InputQuery = exports.InputQuery = /*#__PURE__*/_react.default.memo(function
       return;
     }
     var element = ref.current;
-    var _ref3 = (0, _utils.getPluginState)(editorView.state) || {},
+    var _ref3 = (0, _utils2.getPluginState)(editorView.state) || {},
       removePrefixTriggerOnCancel = _ref3.removePrefixTriggerOnCancel;
     var onFocusIn = function onFocusIn(event) {
       onQueryFocus();
@@ -423,6 +430,20 @@ var InputQuery = exports.InputQuery = /*#__PURE__*/_react.default.memo(function
       });
     }
   }, [forceFocus, reopenQuery]);
+  var classNames = (0, _react.useMemo)(function () {
+    var classes = [];
+    if (showPlaceholder) {
+      // to avoid the placeholder wrapped to next line when triggered at the end of the line
+      // see placeholderWrapStyles in editor-core/src/ui/ContentStyles/index.tsx
+      classes.push('placeholder-decoration-wrap');
+      if (selection.$from.depth > 1) {
+        // to hide placeholder overflow as ellipsis
+        // see placeholderWrapStyles in editor-core/src/ui/ContentStyles/index.tsx
+        classes.push('placeholder-decoration-hide-overflow');
+      }
+    }
+    return classes.join(' ');
+  }, [showPlaceholder, selection]);
   var assistiveHintID = _constants.TYPE_AHEAD_DECORATION_ELEMENT_ID + '__assistiveHint';
   var intl = (0, _reactIntlNext.useIntl)();
 
@@ -432,19 +453,22 @@ var InputQuery = exports.InputQuery = /*#__PURE__*/_react.default.memo(function
       Task added in https://product-fabric.atlassian.net/wiki/spaces/E/pages/3182068181/Potential+improvements#Moderate-changes.
      */
   return (0, _react2.jsx)(_react.Fragment, null, triggerQueryPrefix, (0, _react2.jsx)("span", {
-    css: [querySpanStyles, isEditorControlsEnabled && queryWithoutPlaceholderStyles, showPlaceholder && placeholderStyles],
+    css: [querySpanStyles, isSearchPlaceholderEnabled && queryWithoutPlaceholderStyles, showPlaceholder && placeholderStyles],
     contentEditable: true,
     ref: ref,
     onKeyUp: onKeyUp,
     onClick: onClick,
-    onInput: isEditorControlsEnabled ? onInput : undefined,
+    onInput: isSearchPlaceholderEnabled ? onInput : undefined,
     role: "combobox",
     "aria-controls": _constants.TYPE_AHEAD_DECORATION_ELEMENT_ID,
     "aria-autocomplete": "list",
     "aria-expanded": items.length !== 0,
     "aria-labelledby": assistiveHintID,
     suppressContentEditableWarning: true,
-    "data-query-prefix": triggerQueryPrefix,
+    "data-query-prefix": triggerQueryPrefix
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
+    ,
+    className: classNames,
     "data-place-holder": intl.formatMessage(_typeAhead.typeAheadListMessages.quickInsertInputPlaceholderLabel)
   }, query === null ? (0, _react2.jsx)("input", {
     ref: inputRef,

package/dist/es2019/pm-plugins/decorations.js

@@ -7,7 +7,6 @@ import { TextSelection } from '@atlaskit/editor-prosemirror/state';
 import { Decoration, DecorationSet } from '@atlaskit/editor-prosemirror/view';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { B400 } from '@atlaskit/theme/colors';
-import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { WrapperTypeAhead } from '../ui/WrapperTypeAhead';
 import { closeTypeAhead } from './commands/close-type-ahead';
 import { TYPE_AHEAD_DECORATION_DATA_ATTRIBUTE, TYPE_AHEAD_DECORATION_KEY } from './constants';
@@ -63,11 +62,6 @@ export const factoryDecorations = ({
       typeaheadComponent.dataset.typeAhead = TYPE_AHEAD_DECORATION_DATA_ATTRIBUTE;
       typeaheadComponent.style.color = `var(--ds-text-accent-blue, ${B400})`;
       typeaheadComponent.style.backgroundColor = 'transparent';
-      if (editorExperiment('platform_editor_insertion', 'variant1')) {
-        // As part of controls work, we add placeholder `Search` to quick insert command
-        // This style is to prevent `/Search` being wrapped if it's triggered at the end of the line
-        typeaheadComponent.style.whiteSpace = 'nowrap';
-      }
       const onUndoRedo = inputType => {
         if (!['historyUndo', 'historyRedo'].includes(inputType)) {
           return false;

package/dist/es2019/ui/InputQuery.js

@@ -2,7 +2,7 @@
  * @jsxRuntime classic
  * @jsx jsx
  */
-import React, { Fragment, useCallback, useLayoutEffect, useRef, useState } from 'react';
+import React, { Fragment, useCallback, useLayoutEffect, useMemo, useRef, useState } from 'react';
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
@@ -11,6 +11,7 @@ import { keyName as keyNameNormalized } from 'w3c-keyname';
 import { browser } from '@atlaskit/editor-common/browser';
 import { SelectItemMode, typeAheadListMessages } from '@atlaskit/editor-common/type-ahead';
 import { AssistiveText } from '@atlaskit/editor-common/ui';
+import { findParentNodeOfType } from '@atlaskit/editor-prosemirror/utils';
 import { blockNodesVerticalMargin } from '@atlaskit/editor-shared-styles';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
@@ -95,9 +96,17 @@ export const InputQuery = /*#__PURE__*/React.memo(({
   const ref = useRef(document.createElement('span'));
   const inputRef = useRef(null);
   const [query, setQuery] = useState(null);
-  const isEditorControlsEnabled = editorExperiment('platform_editor_insertion', 'variant1');
+  const isEditorInsertionEnabled = editorExperiment('platform_editor_insertion', 'variant1');
   const isEditorControlsPatch2Enabled = editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_controls_patch_2');
-  const [showPlaceholder, setShowPlaceholder] = useState(isEditorControlsEnabled && triggerQueryPrefix === '/');
+  const isSearchPlaceholderEnabled = isEditorInsertionEnabled || editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_controls_patch_3');
+  const selection = editorView.state.selection;
+  const {
+    table
+  } = editorView.state.schema.nodes;
+  const [showPlaceholder, setShowPlaceholder] = useState(isSearchPlaceholderEnabled && triggerQueryPrefix === '/' &&
+  // When triggered in very narrow table column, placeholder becomes ellipsis only
+  // hence we disable it for now and revisit this scenario in ED-27480
+  !findParentNodeOfType(table)(selection));
   const cleanedInputContent = useCallback(() => {
     var _ref$current;
     const raw = ((_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.textContent) || '';
@@ -413,6 +422,20 @@ export const InputQuery = /*#__PURE__*/React.memo(({
       });
     }
   }, [forceFocus, reopenQuery]);
+  const classNames = useMemo(() => {
+    const classes = [];
+    if (showPlaceholder) {
+      // to avoid the placeholder wrapped to next line when triggered at the end of the line
+      // see placeholderWrapStyles in editor-core/src/ui/ContentStyles/index.tsx
+      classes.push('placeholder-decoration-wrap');
+      if (selection.$from.depth > 1) {
+        // to hide placeholder overflow as ellipsis
+        // see placeholderWrapStyles in editor-core/src/ui/ContentStyles/index.tsx
+        classes.push('placeholder-decoration-hide-overflow');
+      }
+    }
+    return classes.join(' ');
+  }, [showPlaceholder, selection]);
   const assistiveHintID = TYPE_AHEAD_DECORATION_ELEMENT_ID + '__assistiveHint';
   const intl = useIntl();
 
@@ -422,19 +445,22 @@ export const InputQuery = /*#__PURE__*/React.memo(({
       Task added in https://product-fabric.atlassian.net/wiki/spaces/E/pages/3182068181/Potential+improvements#Moderate-changes.
      */
   return jsx(Fragment, null, triggerQueryPrefix, jsx("span", {
-    css: [querySpanStyles, isEditorControlsEnabled && queryWithoutPlaceholderStyles, showPlaceholder && placeholderStyles],
+    css: [querySpanStyles, isSearchPlaceholderEnabled && queryWithoutPlaceholderStyles, showPlaceholder && placeholderStyles],
     contentEditable: true,
     ref: ref,
     onKeyUp: onKeyUp,
     onClick: onClick,
-    onInput: isEditorControlsEnabled ? onInput : undefined,
+    onInput: isSearchPlaceholderEnabled ? onInput : undefined,
     role: "combobox",
     "aria-controls": TYPE_AHEAD_DECORATION_ELEMENT_ID,
     "aria-autocomplete": "list",
     "aria-expanded": items.length !== 0,
     "aria-labelledby": assistiveHintID,
     suppressContentEditableWarning: true,
-    "data-query-prefix": triggerQueryPrefix,
+    "data-query-prefix": triggerQueryPrefix
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
+    ,
+    className: classNames,
     "data-place-holder": intl.formatMessage(typeAheadListMessages.quickInsertInputPlaceholderLabel)
   }, query === null ? jsx("input", {
     ref: inputRef,

package/dist/esm/pm-plugins/decorations.js

@@ -7,7 +7,6 @@ import { TextSelection } from '@atlaskit/editor-prosemirror/state';
 import { Decoration, DecorationSet } from '@atlaskit/editor-prosemirror/view';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { B400 } from '@atlaskit/theme/colors';
-import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { WrapperTypeAhead } from '../ui/WrapperTypeAhead';
 import { closeTypeAhead } from './commands/close-type-ahead';
 import { TYPE_AHEAD_DECORATION_DATA_ATTRIBUTE, TYPE_AHEAD_DECORATION_KEY } from './constants';
@@ -57,11 +56,6 @@ export var factoryDecorations = function factoryDecorations(_ref) {
       typeaheadComponent.dataset.typeAhead = TYPE_AHEAD_DECORATION_DATA_ATTRIBUTE;
       typeaheadComponent.style.color = "var(--ds-text-accent-blue, ".concat(B400, ")");
       typeaheadComponent.style.backgroundColor = 'transparent';
-      if (editorExperiment('platform_editor_insertion', 'variant1')) {
-        // As part of controls work, we add placeholder `Search` to quick insert command
-        // This style is to prevent `/Search` being wrapped if it's triggered at the end of the line
-        typeaheadComponent.style.whiteSpace = 'nowrap';
-      }
       var onUndoRedo = function onUndoRedo(inputType) {
         if (!['historyUndo', 'historyRedo'].includes(inputType)) {
           return false;

package/dist/esm/ui/InputQuery.js

@@ -3,7 +3,7 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
  * @jsxRuntime classic
  * @jsx jsx
  */
-import React, { Fragment, useCallback, useLayoutEffect, useRef, useState } from 'react';
+import React, { Fragment, useCallback, useLayoutEffect, useMemo, useRef, useState } from 'react';
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
@@ -12,6 +12,7 @@ import { keyName as keyNameNormalized } from 'w3c-keyname';
 import { browser } from '@atlaskit/editor-common/browser';
 import { SelectItemMode, typeAheadListMessages } from '@atlaskit/editor-common/type-ahead';
 import { AssistiveText } from '@atlaskit/editor-common/ui';
+import { findParentNodeOfType } from '@atlaskit/editor-prosemirror/utils';
 import { blockNodesVerticalMargin } from '@atlaskit/editor-shared-styles';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
@@ -98,9 +99,15 @@ export var InputQuery = /*#__PURE__*/React.memo(function (_ref) {
     _useState2 = _slicedToArray(_useState, 2),
     query = _useState2[0],
     setQuery = _useState2[1];
-  var isEditorControlsEnabled = editorExperiment('platform_editor_insertion', 'variant1');
+  var isEditorInsertionEnabled = editorExperiment('platform_editor_insertion', 'variant1');
   var isEditorControlsPatch2Enabled = editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_controls_patch_2');
-  var _useState3 = useState(isEditorControlsEnabled && triggerQueryPrefix === '/'),
+  var isSearchPlaceholderEnabled = isEditorInsertionEnabled || editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_controls_patch_3');
+  var selection = editorView.state.selection;
+  var table = editorView.state.schema.nodes.table;
+  var _useState3 = useState(isSearchPlaceholderEnabled && triggerQueryPrefix === '/' &&
+    // When triggered in very narrow table column, placeholder becomes ellipsis only
+    // hence we disable it for now and revisit this scenario in ED-27480
+    !findParentNodeOfType(table)(selection)),
     _useState4 = _slicedToArray(_useState3, 2),
     showPlaceholder = _useState4[0],
     setShowPlaceholder = _useState4[1];
@@ -412,6 +419,20 @@ export var InputQuery = /*#__PURE__*/React.memo(function (_ref) {
       });
     }
   }, [forceFocus, reopenQuery]);
+  var classNames = useMemo(function () {
+    var classes = [];
+    if (showPlaceholder) {
+      // to avoid the placeholder wrapped to next line when triggered at the end of the line
+      // see placeholderWrapStyles in editor-core/src/ui/ContentStyles/index.tsx
+      classes.push('placeholder-decoration-wrap');
+      if (selection.$from.depth > 1) {
+        // to hide placeholder overflow as ellipsis
+        // see placeholderWrapStyles in editor-core/src/ui/ContentStyles/index.tsx
+        classes.push('placeholder-decoration-hide-overflow');
+      }
+    }
+    return classes.join(' ');
+  }, [showPlaceholder, selection]);
   var assistiveHintID = TYPE_AHEAD_DECORATION_ELEMENT_ID + '__assistiveHint';
   var intl = useIntl();
 
@@ -421,19 +442,22 @@ export var InputQuery = /*#__PURE__*/React.memo(function (_ref) {
       Task added in https://product-fabric.atlassian.net/wiki/spaces/E/pages/3182068181/Potential+improvements#Moderate-changes.
      */
   return jsx(Fragment, null, triggerQueryPrefix, jsx("span", {
-    css: [querySpanStyles, isEditorControlsEnabled && queryWithoutPlaceholderStyles, showPlaceholder && placeholderStyles],
+    css: [querySpanStyles, isSearchPlaceholderEnabled && queryWithoutPlaceholderStyles, showPlaceholder && placeholderStyles],
     contentEditable: true,
     ref: ref,
     onKeyUp: onKeyUp,
     onClick: onClick,
-    onInput: isEditorControlsEnabled ? onInput : undefined,
+    onInput: isSearchPlaceholderEnabled ? onInput : undefined,
     role: "combobox",
     "aria-controls": TYPE_AHEAD_DECORATION_ELEMENT_ID,
     "aria-autocomplete": "list",
     "aria-expanded": items.length !== 0,
     "aria-labelledby": assistiveHintID,
     suppressContentEditableWarning: true,
-    "data-query-prefix": triggerQueryPrefix,
+    "data-query-prefix": triggerQueryPrefix
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
+    ,
+    className: classNames,
     "data-place-holder": intl.formatMessage(typeAheadListMessages.quickInsertInputPlaceholderLabel)
   }, query === null ? jsx("input", {
     ref: inputRef,

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-type-ahead",
-	"version": "2.3.2",
+	"version": "2.3.3",
 	"description": "Type-ahead plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -34,18 +34,18 @@
 	},
 	"dependencies": {
 		"@atlaskit/adf-schema": "^47.6.0",
-		"@atlaskit/editor-common": "^103.0.0",
+		"@atlaskit/editor-common": "^103.1.0",
 		"@atlaskit/editor-element-browser": "^0.1.0",
 		"@atlaskit/editor-plugin-analytics": "^2.2.0",
 		"@atlaskit/editor-plugin-connectivity": "^2.0.0",
 		"@atlaskit/editor-plugin-context-panel": "^4.0.0",
 		"@atlaskit/editor-prosemirror": "7.0.0",
 		"@atlaskit/editor-shared-styles": "^3.4.0",
-		"@atlaskit/heading": "^5.1.0",
+		"@atlaskit/heading": "^5.2.0",
 		"@atlaskit/icon": "^25.5.0",
 		"@atlaskit/menu": "^3.2.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
-		"@atlaskit/primitives": "^14.3.0",
+		"@atlaskit/primitives": "^14.4.0",
 		"@atlaskit/prosemirror-input-rules": "^3.3.0",
 		"@atlaskit/theme": "^18.0.0",
 		"@atlaskit/tmp-editor-statsig": "^4.6.0",
@@ -112,6 +112,9 @@
 		},
 		"platform_editor_controls_patch_2": {
 			"type": "boolean"
+		},
+		"platform_editor_controls_patch_3": {
+			"type": "boolean"
 		}
 	}
 }