@atlaskit/editor-plugin-type-ahead 1.0.1 → 1.0.3

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 (19) hide show
  1. package/.eslintrc.js +4 -0
  2. package/CHANGELOG.md +36 -0
  3. package/dist/cjs/pm-plugins/input-rules.js +5 -3
  4. package/dist/cjs/ui/TypeAheadList.js +1 -1
  5. package/dist/cjs/ui/TypeAheadListItem.js +22 -12
  6. package/dist/cjs/ui/TypeAheadPopup.js +8 -9
  7. package/dist/es2019/pm-plugins/input-rules.js +5 -3
  8. package/dist/es2019/ui/TypeAheadList.js +2 -2
  9. package/dist/es2019/ui/TypeAheadListItem.js +15 -21
  10. package/dist/es2019/ui/TypeAheadPopup.js +2 -3
  11. package/dist/esm/pm-plugins/input-rules.js +5 -3
  12. package/dist/esm/ui/TypeAheadList.js +2 -2
  13. package/dist/esm/ui/TypeAheadListItem.js +21 -11
  14. package/dist/esm/ui/TypeAheadPopup.js +2 -3
  15. package/dist/types/pm-plugins/input-rules.d.ts +1 -1
  16. package/dist/types/ui/TypeAheadListItem.d.ts +0 -3
  17. package/dist/types-ts4.5/pm-plugins/input-rules.d.ts +1 -1
  18. package/dist/types-ts4.5/ui/TypeAheadListItem.d.ts +0 -3
  19. package/package.json +4 -4
package/.eslintrc.js CHANGED
@@ -2,6 +2,10 @@ module.exports = {
2
2
  rules: {
3
3
  '@typescript-eslint/no-duplicate-imports': 'error',
4
4
  '@typescript-eslint/no-explicit-any': 'error',
5
+ '@atlaskit/design-system/ensure-design-token-usage/preview': [
6
+ 'error',
7
+ { domains: ['spacing'], shouldEnforceFallbacks: false },
8
+ ],
5
9
  '@typescript-eslint/ban-types': [
6
10
  'error',
7
11
  {
package/CHANGELOG.md CHANGED
@@ -1,5 +1,41 @@
1
1
  # @atlaskit/editor-plugin-type-ahead
2
2
 
3
+ ## 1.0.3
4
+
5
+ ### Patch Changes
6
+
7
+ - [#75482](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/75482) [`18b5a6fb910a`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/18b5a6fb910a) - # MAJOR CHANGE to `@atlaskit/prosemirror-input-rules` package.
8
+
9
+ ## WHY?
10
+
11
+ Removing editor-common dependencies from prosemirror-input-rules package.
12
+
13
+ This makes it easier for editor updates because it simplifies our dependency graph.
14
+
15
+ ## WHAT and HOW?
16
+
17
+ These are no longer available via `@atlaskit/prosemirror-input-rules` but are available from `@atlaskit/editor-common/types`:
18
+
19
+ - InputRuleWrapper
20
+ - InputRuleHandler
21
+ - OnHandlerApply
22
+ - createRule
23
+
24
+ These have changed from a `SafePlugin` to a `SafePluginSpec`. In order to update your code you need to instantiate a `SafePlugin` (ie. `new SafePlugin(createPlugin( ... ))`).
25
+
26
+ `SafePlugin` exists in `@atlaskit/editor-common/safe-plugin`.
27
+
28
+ - createPlugin
29
+ - createInputRulePlugin
30
+
31
+ - Updated dependencies
32
+
33
+ ## 1.0.2
34
+
35
+ ### Patch Changes
36
+
37
+ - [#73177](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/73177) [`22452599ed8f`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/22452599ed8f) - Move styling for certain packages to tokens.
38
+
3
39
  ## 1.0.1
4
40
 
5
41
  ### Patch Changes
package/dist/cjs/pm-plugins/input-rules.js CHANGED
@@ -6,6 +6,8 @@ Object.defineProperty(exports, "__esModule", {
6
6
  exports.default = void 0;
7
7
  exports.inputRulePlugin = inputRulePlugin;
8
8
  var _analytics = require("@atlaskit/editor-common/analytics");
9
+ var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
10
+ var _utils = require("@atlaskit/editor-common/utils");
9
11
  var _prosemirrorInputRules = require("@atlaskit/prosemirror-input-rules");
10
12
  var _openTypeaheadAtCursor = require("../transforms/open-typeahead-at-cursor");
11
13
  function inputRulePlugin(schema, typeAheads, featureFlags) {
@@ -18,7 +20,7 @@ function inputRulePlugin(schema, typeAheads, featureFlags) {
18
20
  return acc;
19
21
  }
20
22
  var regex = new RegExp("(^|[.!?\\s".concat(_prosemirrorInputRules.leafNodeReplacementCharacter, "])(").concat(trigger, ")$"));
21
- acc.push((0, _prosemirrorInputRules.createRule)(regex, function (state, match) {
23
+ acc.push((0, _utils.createRule)(regex, function (state, match) {
22
24
  return (0, _openTypeaheadAtCursor.openTypeAheadAtCursor)({
23
25
  triggerHandler: typeAhead,
24
26
  inputMethod: _analytics.INPUT_METHOD.KEYBOARD
@@ -28,9 +30,9 @@ function inputRulePlugin(schema, typeAheads, featureFlags) {
28
30
  }));
29
31
  return acc;
30
32
  }, []);
31
- var plugin = (0, _prosemirrorInputRules.createPlugin)('type-ahead', rules, {
33
+ var plugin = new _safePlugin.SafePlugin((0, _prosemirrorInputRules.createPlugin)('type-ahead', rules, {
32
34
  allowInsertTextOnDocument: false
33
- });
35
+ }));
34
36
  return plugin;
35
37
  }
36
38
  var _default = exports.default = inputRulePlugin;
package/dist/cjs/ui/TypeAheadList.js CHANGED
@@ -24,7 +24,7 @@ var _templateObject;
24
24
  /** @jsx jsx */
25
25
  function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
26
26
  function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
27
- var LIST_ITEM_ESTIMATED_HEIGHT = _TypeAheadListItem.ICON_HEIGHT + _TypeAheadListItem.ITEM_PADDING * 2;
27
+ var LIST_ITEM_ESTIMATED_HEIGHT = 64;
28
28
  var LIST_WIDTH = 320;
29
29
  var TypeaheadAssistiveTextPureComponent = /*#__PURE__*/_react.default.memo(function (_ref) {
30
30
  var numberOfResults = _ref.numberOfResults;
package/dist/cjs/ui/TypeAheadListItem.js CHANGED
@@ -5,7 +5,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
5
5
  Object.defineProperty(exports, "__esModule", {
6
6
  value: true
7
7
  });
8
- exports.itemIcon = exports.TypeAheadListItem = exports.ITEM_PADDING = exports.ICON_WIDTH = exports.ICON_HEIGHT = void 0;
8
+ exports.itemIcon = exports.TypeAheadListItem = void 0;
9
9
  var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
10
10
  var _react = _interopRequireWildcard(require("react"));
11
11
  var _react2 = require("@emotion/react");
@@ -16,20 +16,30 @@ var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
16
16
  var _shortcut = require("@atlaskit/editor-shared-styles/shortcut");
17
17
  var _menu = require("@atlaskit/menu");
18
18
  var _colors = require("@atlaskit/theme/colors");
19
- var _constants = require("@atlaskit/theme/constants");
20
- var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6; // Disabling for ED-21403 fixing accessibility issue.
19
+ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5; // Disabling for ED-21403 fixing accessibility issue.
21
20
  /* eslint-disable jsx-a11y/role-supports-aria-props */
22
21
  /** @jsx jsx */
23
22
  function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
24
23
  function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
25
- var ICON_HEIGHT = exports.ICON_HEIGHT = 40;
26
- var ICON_WIDTH = exports.ICON_WIDTH = 40;
27
- var ITEM_PADDING = exports.ITEM_PADDING = 12;
28
- var itemIcon = exports.itemIcon = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n width: ", "px;\n height: ", "px;\n overflow: hidden;\n border: 1px solid ", "; /* N60 at 50% */\n border-radius: ", "px;\n box-sizing: border-box;\n\n display: flex;\n justify-content: center;\n align-items: center;\n\n div {\n width: ", "px;\n height: ", "px;\n }\n"])), ICON_WIDTH, ICON_HEIGHT, "var(--ds-border, rgba(223, 225, 229, 0.5))", (0, _constants.borderRadius)(), ICON_WIDTH, ICON_HEIGHT);
29
- var itemBody = (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n flex-direction: row;\n flex-wrap: nowrap;\n justify-content: space-between;\n"])));
30
- var itemText = (0, _react2.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n white-space: initial;\n color: ", ";\n .item-title {\n line-height: 1.4;\n }\n .item-description {\n font-size: ", ";\n color: ", ";\n margin-top: 3px;\n }\n"])), "var(--ds-text, ".concat(_colors.N800, ")"), (0, _editorSharedStyles.relativeFontSizeToBase16)(12), "var(--ds-text-subtlest, ".concat(_colors.N200, ")"));
31
- var itemAfter = (0, _react2.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n flex: 0 0 auto;\n"])));
32
- var customRenderItemDivStyle = (0, _react2.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n overflow: hidden;\n &:focus {\n box-shadow: inset 2px 0px 0px ", ";\n background-color: ", ";\n outline: none;\n }\n"])), "var(--ds-border-focused, ".concat(_colors.B400, ")"), "var(--ds-background-neutral-subtle-hovered, ".concat(_colors.N30, ")"));
24
+ var itemIcon = exports.itemIcon = (0, _react2.css)({
25
+ width: "var(--ds-space-500, 40px)",
26
+ height: "var(--ds-space-500, 40px)",
27
+ overflow: 'hidden',
28
+ border: "1px solid ".concat("var(--ds-border, rgba(223, 225, 229, 0.5))") /* N60 at 50% */,
29
+ borderRadius: "var(--ds-border-radius, 3px)",
30
+ boxSizing: 'border-box',
31
+ display: 'flex',
32
+ justifyContent: 'center',
33
+ alignItems: 'center',
34
+ div: {
35
+ width: "var(--ds-space-500, 40px)",
36
+ height: "var(--ds-space-500, 40px)"
37
+ }
38
+ });
39
+ var itemBody = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n flex-direction: row;\n flex-wrap: nowrap;\n justify-content: space-between;\n"])));
40
+ var itemText = (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n white-space: initial;\n color: ", ";\n .item-title {\n line-height: 1.4;\n }\n .item-description {\n font-size: ", ";\n color: ", ";\n margin-top: ", ";\n }\n"])), "var(--ds-text, ".concat(_colors.N800, ")"), (0, _editorSharedStyles.relativeFontSizeToBase16)(12), "var(--ds-text-subtlest, ".concat(_colors.N200, ")"), "var(--ds-space-050, 4px)");
41
+ var itemAfter = (0, _react2.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n flex: 0 0 auto;\n"])));
42
+ var customRenderItemDivStyle = (0, _react2.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n overflow: hidden;\n &:focus {\n box-shadow: inset 2px 0px 0px ", ";\n background-color: ", ";\n outline: none;\n }\n"])), "var(--ds-border-focused, ".concat(_colors.B400, ")"), "var(--ds-background-neutral-subtle-hovered, ".concat(_colors.N30, ")"));
33
43
 
34
44
  /**
35
45
  * This CSS emulates the desired behaviour with :focus-visible for firefox.
@@ -50,7 +60,7 @@ var selectionFrame = {
50
60
  outline: 'none'
51
61
  }
52
62
  };
53
- var selectedStyle = (0, _react2.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n background-color: ", ";\n box-shadow: inset 2px 0px 0px ", ";\n"])), "var(--ds-background-neutral-subtle-hovered, ".concat(_colors.N30, ")"), "var(--ds-border-focused, ".concat(_colors.B400, ")"));
63
+ var selectedStyle = (0, _react2.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n background-color: ", ";\n box-shadow: inset 2px 0px 0px ", ";\n"])), "var(--ds-background-neutral-subtle-hovered, ".concat(_colors.N30, ")"), "var(--ds-border-focused, ".concat(_colors.B400, ")"));
54
64
  var FallbackIcon = /*#__PURE__*/_react.default.memo(function (_ref) {
55
65
  var label = _ref.label;
56
66
  return (0, _react2.jsx)(_quickInsert.IconFallback, null);
package/dist/cjs/ui/TypeAheadPopup.js CHANGED
@@ -15,16 +15,15 @@ var _analytics = require("@atlaskit/editor-common/analytics");
15
15
  var _ui = require("@atlaskit/editor-common/ui");
16
16
  var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
17
17
  var _colors = require("@atlaskit/theme/colors");
18
- var _constants = require("@atlaskit/theme/constants");
19
- var _constants2 = require("../constants");
18
+ var _constants = require("../constants");
20
19
  var _TypeAheadList = require("./TypeAheadList");
21
- var _TypeAheadListItem = require("./TypeAheadListItem");
22
20
  var _templateObject;
23
21
  /** @jsx jsx */
24
22
  function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
25
23
  function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
26
24
  var DEFAULT_TYPEAHEAD_MENU_HEIGHT = 380;
27
- var typeAheadContent = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n background: ", ";\n border-radius: ", "px;\n box-shadow: ", ";\n padding: ", " 0;\n width: 320px;\n max-height: 380px; /* ~5.5 visibile items */\n overflow-y: auto;\n -ms-overflow-style: -ms-autohiding-scrollbar;\n position: relative;\n"])), "var(--ds-surface-overlay, ".concat(_colors.N0, ")"), (0, _constants.borderRadius)(), "var(--ds-shadow-overlay, ".concat("0 0 1px ".concat(_colors.N60A, ", 0 4px 8px -2px ").concat(_colors.N50A), ")"), "var(--ds-space-050, 4px)");
25
+ var ITEM_PADDING = 12;
26
+ var typeAheadContent = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n background: ", ";\n border-radius: ", ";\n box-shadow: ", ";\n padding: ", " 0;\n width: 320px;\n max-height: 380px; /* ~5.5 visibile items */\n overflow-y: auto;\n -ms-overflow-style: -ms-autohiding-scrollbar;\n position: relative;\n"])), "var(--ds-surface-overlay, ".concat(_colors.N0, ")"), "var(--ds-border-radius, 3px)", "var(--ds-shadow-overlay, ".concat("0 0 1px ".concat(_colors.N60A, ", 0 4px 8px -2px ").concat(_colors.N50A), ")"), "var(--ds-space-050, 4px)");
28
27
  var Highlight = function Highlight(_ref) {
29
28
  var state = _ref.state,
30
29
  triggerHandler = _ref.triggerHandler;
@@ -134,7 +133,7 @@ var TypeAheadPopup = exports.TypeAheadPopup = /*#__PURE__*/_react.default.memo(f
134
133
  // Each typeahead item has some padding
135
134
  // We want to leave some space at the top so first item
136
135
  // is not partially cropped
137
- var fitHeightWithSpace = newFitHeight - _TypeAheadListItem.ITEM_PADDING * 2;
136
+ var fitHeightWithSpace = newFitHeight - ITEM_PADDING * 2;
138
137
 
139
138
  // Ensure typeahead height is max its default height
140
139
  var minFitHeight = Math.min(DEFAULT_TYPEAHEAD_MENU_HEIGHT, fitHeightWithSpace);
@@ -163,7 +162,7 @@ var TypeAheadPopup = exports.TypeAheadPopup = /*#__PURE__*/_react.default.memo(f
163
162
  // Given the user is changing the focus
164
163
  // When the target is inside the TypeAhead Popup
165
164
  // Then the popup should stay open
166
- if (relatedTarget instanceof HTMLElement && relatedTarget.closest && (relatedTarget.closest(".".concat(_constants2.TYPE_AHEAD_POPUP_CONTENT_CLASS)) || relatedTarget.closest("[data-type-ahead=\"".concat(_constants2.TYPE_AHEAD_DECORATION_DATA_ATTRIBUTE, "\"]")))) {
165
+ if (relatedTarget instanceof HTMLElement && relatedTarget.closest && (relatedTarget.closest(".".concat(_constants.TYPE_AHEAD_POPUP_CONTENT_CLASS)) || relatedTarget.closest("[data-type-ahead=\"".concat(_constants.TYPE_AHEAD_DECORATION_DATA_ATTRIBUTE, "\"]")))) {
167
166
  return;
168
167
  }
169
168
  if (!(((_window$getSelection = window.getSelection()) === null || _window$getSelection === void 0 ? void 0 : _window$getSelection.type) === 'Range')) {
@@ -171,7 +170,7 @@ var TypeAheadPopup = exports.TypeAheadPopup = /*#__PURE__*/_react.default.memo(f
171
170
  }
172
171
  cancel({
173
172
  addPrefixTrigger: true,
174
- setSelectionAt: _constants2.CloseSelectionOptions.AFTER_TEXT_INSERTED,
173
+ setSelectionAt: _constants.CloseSelectionOptions.AFTER_TEXT_INSERTED,
175
174
  forceFocusOnEditor: false
176
175
  });
177
176
  };
@@ -189,7 +188,7 @@ var TypeAheadPopup = exports.TypeAheadPopup = /*#__PURE__*/_react.default.memo(f
189
188
  if (event.key === 'Escape') {
190
189
  cancel({
191
190
  addPrefixTrigger: true,
192
- setSelectionAt: _constants2.CloseSelectionOptions.AFTER_TEXT_INSERTED,
191
+ setSelectionAt: _constants.CloseSelectionOptions.AFTER_TEXT_INSERTED,
193
192
  forceFocusOnEditor: true
194
193
  });
195
194
  }
@@ -212,7 +211,7 @@ var TypeAheadPopup = exports.TypeAheadPopup = /*#__PURE__*/_react.default.memo(f
212
211
  }, (0, _react2.jsx)("div", {
213
212
  css: typeAheadContent,
214
213
  tabIndex: 0,
215
- className: _constants2.TYPE_AHEAD_POPUP_CONTENT_CLASS,
214
+ className: _constants.TYPE_AHEAD_POPUP_CONTENT_CLASS,
216
215
  ref: ref
217
216
  }, (0, _react2.jsx)(Highlight, {
218
217
  state: editorView.state,
package/dist/es2019/pm-plugins/input-rules.js CHANGED
@@ -1,5 +1,7 @@
1
1
  import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
2
- import { createPlugin, createRule, leafNodeReplacementCharacter } from '@atlaskit/prosemirror-input-rules';
2
+ import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
3
+ import { createRule } from '@atlaskit/editor-common/utils';
4
+ import { createPlugin, leafNodeReplacementCharacter } from '@atlaskit/prosemirror-input-rules';
3
5
  import { openTypeAheadAtCursor } from '../transforms/open-typeahead-at-cursor';
4
6
  export function inputRulePlugin(schema, typeAheads, featureFlags) {
5
7
  if (!typeAheads || typeAheads.length === 0) {
@@ -21,9 +23,9 @@ export function inputRulePlugin(schema, typeAheads, featureFlags) {
21
23
  }));
22
24
  return acc;
23
25
  }, []);
24
- const plugin = createPlugin('type-ahead', rules, {
26
+ const plugin = new SafePlugin(createPlugin('type-ahead', rules, {
25
27
  allowInsertTextOnDocument: false
26
- });
28
+ }));
27
29
  return plugin;
28
30
  }
29
31
  export default inputRulePlugin;
package/dist/es2019/ui/TypeAheadList.js CHANGED
@@ -11,8 +11,8 @@ import { updateSelectedIndex } from '../commands/update-selected-index';
11
11
  import { TYPE_AHEAD_DECORATION_ELEMENT_ID } from '../constants';
12
12
  import { getTypeAheadListAriaLabels, moveSelectedIndex } from '../utils';
13
13
  import { AssistiveText } from './AssistiveText';
14
- import { ICON_HEIGHT, ITEM_PADDING, TypeAheadListItem } from './TypeAheadListItem';
15
- const LIST_ITEM_ESTIMATED_HEIGHT = ICON_HEIGHT + ITEM_PADDING * 2;
14
+ import { TypeAheadListItem } from './TypeAheadListItem';
15
+ const LIST_ITEM_ESTIMATED_HEIGHT = 64;
16
16
  const LIST_WIDTH = 320;
17
17
  const TypeaheadAssistiveTextPureComponent = /*#__PURE__*/React.memo(({
18
18
  numberOfResults
package/dist/es2019/ui/TypeAheadListItem.js CHANGED
@@ -10,27 +10,21 @@ import { relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
10
10
  import { shortcutStyle } from '@atlaskit/editor-shared-styles/shortcut';
11
11
  import { ButtonItem } from '@atlaskit/menu';
12
12
  import { B400, N200, N30, N800 } from '@atlaskit/theme/colors';
13
- import { borderRadius } from '@atlaskit/theme/constants';
14
- export const ICON_HEIGHT = 40;
15
- export const ICON_WIDTH = 40;
16
- export const ITEM_PADDING = 12;
17
- export const itemIcon = css`
18
- width: ${ICON_WIDTH}px;
19
- height: ${ICON_HEIGHT}px;
20
- overflow: hidden;
21
- border: 1px solid ${"var(--ds-border, rgba(223, 225, 229, 0.5))"}; /* N60 at 50% */
22
- border-radius: ${borderRadius()}px;
23
- box-sizing: border-box;
24
-
25
- display: flex;
26
- justify-content: center;
27
- align-items: center;
28
-
29
- div {
30
- width: ${ICON_WIDTH}px;
31
- height: ${ICON_HEIGHT}px;
13
+ export const itemIcon = css({
14
+ width: "var(--ds-space-500, 40px)",
15
+ height: "var(--ds-space-500, 40px)",
16
+ overflow: 'hidden',
17
+ border: `1px solid ${"var(--ds-border, rgba(223, 225, 229, 0.5))"}` /* N60 at 50% */,
18
+ borderRadius: "var(--ds-border-radius, 3px)",
19
+ boxSizing: 'border-box',
20
+ display: 'flex',
21
+ justifyContent: 'center',
22
+ alignItems: 'center',
23
+ div: {
24
+ width: "var(--ds-space-500, 40px)",
25
+ height: "var(--ds-space-500, 40px)"
32
26
  }
33
- `;
27
+ });
34
28
  const itemBody = css`
35
29
  display: flex;
36
30
  flex-direction: row;
@@ -46,7 +40,7 @@ const itemText = css`
46
40
  .item-description {
47
41
  font-size: ${relativeFontSizeToBase16(12)};
48
42
  color: ${`var(--ds-text-subtlest, ${N200})`};
49
- margin-top: 3px;
43
+ margin-top: ${"var(--ds-space-050, 4px)"};
50
44
  }
51
45
  `;
52
46
  const itemAfter = css`
package/dist/es2019/ui/TypeAheadPopup.js CHANGED
@@ -6,14 +6,13 @@ import { ACTION, ACTION_SUBJECT, EVENT_TYPE } from '@atlaskit/editor-common/anal
6
6
  import { findOverflowScrollParent, Popup } from '@atlaskit/editor-common/ui';
7
7
  import { akEditorFloatingDialogZIndex } from '@atlaskit/editor-shared-styles';
8
8
  import { N0, N50A, N60A } from '@atlaskit/theme/colors';
9
- import { borderRadius } from '@atlaskit/theme/constants';
10
9
  import { CloseSelectionOptions, TYPE_AHEAD_DECORATION_DATA_ATTRIBUTE, TYPE_AHEAD_POPUP_CONTENT_CLASS } from '../constants';
11
10
  import { TypeAheadList } from './TypeAheadList';
12
- import { ITEM_PADDING } from './TypeAheadListItem';
13
11
  const DEFAULT_TYPEAHEAD_MENU_HEIGHT = 380;
12
+ const ITEM_PADDING = 12;
14
13
  const typeAheadContent = css`
15
14
  background: ${`var(--ds-surface-overlay, ${N0})`};
16
- border-radius: ${borderRadius()}px;
15
+ border-radius: ${"var(--ds-border-radius, 3px)"};
17
16
  box-shadow: ${`var(--ds-shadow-overlay, ${`0 0 1px ${N60A}, 0 4px 8px -2px ${N50A}`})`};
18
17
  padding: ${"var(--ds-space-050, 4px)"} 0;
19
18
  width: 320px;
package/dist/esm/pm-plugins/input-rules.js CHANGED
@@ -1,5 +1,7 @@
1
1
  import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
2
- import { createPlugin, createRule, leafNodeReplacementCharacter } from '@atlaskit/prosemirror-input-rules';
2
+ import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
3
+ import { createRule } from '@atlaskit/editor-common/utils';
4
+ import { createPlugin, leafNodeReplacementCharacter } from '@atlaskit/prosemirror-input-rules';
3
5
  import { openTypeAheadAtCursor } from '../transforms/open-typeahead-at-cursor';
4
6
  export function inputRulePlugin(schema, typeAheads, featureFlags) {
5
7
  if (!typeAheads || typeAheads.length === 0) {
@@ -21,9 +23,9 @@ export function inputRulePlugin(schema, typeAheads, featureFlags) {
21
23
  }));
22
24
  return acc;
23
25
  }, []);
24
- var plugin = createPlugin('type-ahead', rules, {
26
+ var plugin = new SafePlugin(createPlugin('type-ahead', rules, {
25
27
  allowInsertTextOnDocument: false
26
- });
28
+ }));
27
29
  return plugin;
28
30
  }
29
31
  export default inputRulePlugin;
package/dist/esm/ui/TypeAheadList.js CHANGED
@@ -14,8 +14,8 @@ import { updateSelectedIndex } from '../commands/update-selected-index';
14
14
  import { TYPE_AHEAD_DECORATION_ELEMENT_ID } from '../constants';
15
15
  import { getTypeAheadListAriaLabels, moveSelectedIndex } from '../utils';
16
16
  import { AssistiveText } from './AssistiveText';
17
- import { ICON_HEIGHT, ITEM_PADDING, TypeAheadListItem } from './TypeAheadListItem';
18
- var LIST_ITEM_ESTIMATED_HEIGHT = ICON_HEIGHT + ITEM_PADDING * 2;
17
+ import { TypeAheadListItem } from './TypeAheadListItem';
18
+ var LIST_ITEM_ESTIMATED_HEIGHT = 64;
19
19
  var LIST_WIDTH = 320;
20
20
  var TypeaheadAssistiveTextPureComponent = /*#__PURE__*/React.memo(function (_ref) {
21
21
  var numberOfResults = _ref.numberOfResults;
package/dist/esm/ui/TypeAheadListItem.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
2
- var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
2
+ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
3
3
  // Disabling for ED-21403 fixing accessibility issue.
4
4
  /* eslint-disable jsx-a11y/role-supports-aria-props */
5
5
  /** @jsx jsx */
@@ -12,15 +12,25 @@ import { relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
12
12
  import { shortcutStyle } from '@atlaskit/editor-shared-styles/shortcut';
13
13
  import { ButtonItem } from '@atlaskit/menu';
14
14
  import { B400, N200, N30, N800 } from '@atlaskit/theme/colors';
15
- import { borderRadius } from '@atlaskit/theme/constants';
16
- export var ICON_HEIGHT = 40;
17
- export var ICON_WIDTH = 40;
18
- export var ITEM_PADDING = 12;
19
- export var itemIcon = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n width: ", "px;\n height: ", "px;\n overflow: hidden;\n border: 1px solid ", "; /* N60 at 50% */\n border-radius: ", "px;\n box-sizing: border-box;\n\n display: flex;\n justify-content: center;\n align-items: center;\n\n div {\n width: ", "px;\n height: ", "px;\n }\n"])), ICON_WIDTH, ICON_HEIGHT, "var(--ds-border, rgba(223, 225, 229, 0.5))", borderRadius(), ICON_WIDTH, ICON_HEIGHT);
20
- var itemBody = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n display: flex;\n flex-direction: row;\n flex-wrap: nowrap;\n justify-content: space-between;\n"])));
21
- var itemText = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n white-space: initial;\n color: ", ";\n .item-title {\n line-height: 1.4;\n }\n .item-description {\n font-size: ", ";\n color: ", ";\n margin-top: 3px;\n }\n"])), "var(--ds-text, ".concat(N800, ")"), relativeFontSizeToBase16(12), "var(--ds-text-subtlest, ".concat(N200, ")"));
22
- var itemAfter = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n flex: 0 0 auto;\n"])));
23
- var customRenderItemDivStyle = css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n overflow: hidden;\n &:focus {\n box-shadow: inset 2px 0px 0px ", ";\n background-color: ", ";\n outline: none;\n }\n"])), "var(--ds-border-focused, ".concat(B400, ")"), "var(--ds-background-neutral-subtle-hovered, ".concat(N30, ")"));
15
+ export var itemIcon = css({
16
+ width: "var(--ds-space-500, 40px)",
17
+ height: "var(--ds-space-500, 40px)",
18
+ overflow: 'hidden',
19
+ border: "1px solid ".concat("var(--ds-border, rgba(223, 225, 229, 0.5))") /* N60 at 50% */,
20
+ borderRadius: "var(--ds-border-radius, 3px)",
21
+ boxSizing: 'border-box',
22
+ display: 'flex',
23
+ justifyContent: 'center',
24
+ alignItems: 'center',
25
+ div: {
26
+ width: "var(--ds-space-500, 40px)",
27
+ height: "var(--ds-space-500, 40px)"
28
+ }
29
+ });
30
+ var itemBody = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n display: flex;\n flex-direction: row;\n flex-wrap: nowrap;\n justify-content: space-between;\n"])));
31
+ var itemText = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n white-space: initial;\n color: ", ";\n .item-title {\n line-height: 1.4;\n }\n .item-description {\n font-size: ", ";\n color: ", ";\n margin-top: ", ";\n }\n"])), "var(--ds-text, ".concat(N800, ")"), relativeFontSizeToBase16(12), "var(--ds-text-subtlest, ".concat(N200, ")"), "var(--ds-space-050, 4px)");
32
+ var itemAfter = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n flex: 0 0 auto;\n"])));
33
+ var customRenderItemDivStyle = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n overflow: hidden;\n &:focus {\n box-shadow: inset 2px 0px 0px ", ";\n background-color: ", ";\n outline: none;\n }\n"])), "var(--ds-border-focused, ".concat(B400, ")"), "var(--ds-background-neutral-subtle-hovered, ".concat(N30, ")"));
24
34
 
25
35
  /**
26
36
  * This CSS emulates the desired behaviour with :focus-visible for firefox.
@@ -41,7 +51,7 @@ var selectionFrame = {
41
51
  outline: 'none'
42
52
  }
43
53
  };
44
- var selectedStyle = css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n background-color: ", ";\n box-shadow: inset 2px 0px 0px ", ";\n"])), "var(--ds-background-neutral-subtle-hovered, ".concat(N30, ")"), "var(--ds-border-focused, ".concat(B400, ")"));
54
+ var selectedStyle = css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n background-color: ", ";\n box-shadow: inset 2px 0px 0px ", ";\n"])), "var(--ds-background-neutral-subtle-hovered, ".concat(N30, ")"), "var(--ds-border-focused, ".concat(B400, ")"));
45
55
  var FallbackIcon = /*#__PURE__*/React.memo(function (_ref) {
46
56
  var label = _ref.label;
47
57
  return jsx(IconFallback, null);
package/dist/esm/ui/TypeAheadPopup.js CHANGED
@@ -9,12 +9,11 @@ import { ACTION, ACTION_SUBJECT, EVENT_TYPE } from '@atlaskit/editor-common/anal
9
9
  import { findOverflowScrollParent, Popup } from '@atlaskit/editor-common/ui';
10
10
  import { akEditorFloatingDialogZIndex } from '@atlaskit/editor-shared-styles';
11
11
  import { N0, N50A, N60A } from '@atlaskit/theme/colors';
12
- import { borderRadius } from '@atlaskit/theme/constants';
13
12
  import { CloseSelectionOptions, TYPE_AHEAD_DECORATION_DATA_ATTRIBUTE, TYPE_AHEAD_POPUP_CONTENT_CLASS } from '../constants';
14
13
  import { TypeAheadList } from './TypeAheadList';
15
- import { ITEM_PADDING } from './TypeAheadListItem';
16
14
  var DEFAULT_TYPEAHEAD_MENU_HEIGHT = 380;
17
- var typeAheadContent = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n background: ", ";\n border-radius: ", "px;\n box-shadow: ", ";\n padding: ", " 0;\n width: 320px;\n max-height: 380px; /* ~5.5 visibile items */\n overflow-y: auto;\n -ms-overflow-style: -ms-autohiding-scrollbar;\n position: relative;\n"])), "var(--ds-surface-overlay, ".concat(N0, ")"), borderRadius(), "var(--ds-shadow-overlay, ".concat("0 0 1px ".concat(N60A, ", 0 4px 8px -2px ").concat(N50A), ")"), "var(--ds-space-050, 4px)");
15
+ var ITEM_PADDING = 12;
16
+ var typeAheadContent = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n background: ", ";\n border-radius: ", ";\n box-shadow: ", ";\n padding: ", " 0;\n width: 320px;\n max-height: 380px; /* ~5.5 visibile items */\n overflow-y: auto;\n -ms-overflow-style: -ms-autohiding-scrollbar;\n position: relative;\n"])), "var(--ds-surface-overlay, ".concat(N0, ")"), "var(--ds-border-radius, 3px)", "var(--ds-shadow-overlay, ".concat("0 0 1px ".concat(N60A, ", 0 4px 8px -2px ").concat(N50A), ")"), "var(--ds-space-050, 4px)");
18
17
  var Highlight = function Highlight(_ref) {
19
18
  var state = _ref.state,
20
19
  triggerHandler = _ref.triggerHandler;
package/dist/types/pm-plugins/input-rules.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import type { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
1
+ import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
2
2
  import type { FeatureFlags } from '@atlaskit/editor-common/types';
3
3
  import type { Schema } from '@atlaskit/editor-prosemirror/model';
4
4
  import type { TypeAheadHandler } from '../types';
package/dist/types/ui/TypeAheadListItem.d.ts CHANGED
@@ -1,9 +1,6 @@
1
1
  import { jsx } from '@emotion/react';
2
2
  import { SelectItemMode } from '@atlaskit/editor-common/type-ahead';
3
3
  import type { TypeAheadItem } from '../types';
4
- export declare const ICON_HEIGHT = 40;
5
- export declare const ICON_WIDTH = 40;
6
- export declare const ITEM_PADDING = 12;
7
4
  export declare const itemIcon: import("@emotion/react").SerializedStyles;
8
5
  type TypeAheadListItemProps = {
9
6
  item: TypeAheadItem;
package/dist/types-ts4.5/pm-plugins/input-rules.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import type { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
1
+ import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
2
2
  import type { FeatureFlags } from '@atlaskit/editor-common/types';
3
3
  import type { Schema } from '@atlaskit/editor-prosemirror/model';
4
4
  import type { TypeAheadHandler } from '../types';
package/dist/types-ts4.5/ui/TypeAheadListItem.d.ts CHANGED
@@ -1,9 +1,6 @@
1
1
  import { jsx } from '@emotion/react';
2
2
  import { SelectItemMode } from '@atlaskit/editor-common/type-ahead';
3
3
  import type { TypeAheadItem } from '../types';
4
- export declare const ICON_HEIGHT = 40;
5
- export declare const ICON_WIDTH = 40;
6
- export declare const ITEM_PADDING = 12;
7
4
  export declare const itemIcon: import("@emotion/react").SerializedStyles;
8
5
  type TypeAheadListItemProps = {
9
6
  item: TypeAheadItem;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-plugin-type-ahead",
3
- "version": "1.0.1",
3
+ "version": "1.0.3",
4
4
  "description": "Type-ahead plugin for @atlaskit/editor-core",
5
5
  "author": "Atlassian Pty Ltd",
6
6
  "license": "Apache-2.0",
@@ -34,15 +34,15 @@
34
34
  "dependencies": {
35
35
  "@atlaskit/adf-schema": "^35.5.1",
36
36
  "@atlaskit/analytics-next": "^9.2.0",
37
- "@atlaskit/editor-common": "^78.0.0",
37
+ "@atlaskit/editor-common": "^78.4.0",
38
38
  "@atlaskit/editor-plugin-analytics": "^1.0.0",
39
39
  "@atlaskit/editor-prosemirror": "3.0.0",
40
40
  "@atlaskit/editor-shared-styles": "^2.9.0",
41
41
  "@atlaskit/menu": "^2.1.0",
42
42
  "@atlaskit/platform-feature-flags": "^0.2.0",
43
- "@atlaskit/prosemirror-input-rules": "^2.4.0",
43
+ "@atlaskit/prosemirror-input-rules": "^3.0.0",
44
44
  "@atlaskit/theme": "^12.6.0",
45
- "@atlaskit/tokens": "^1.37.0",
45
+ "@atlaskit/tokens": "^1.38.0",
46
46
  "@babel/runtime": "^7.0.0",
47
47
  "@emotion/react": "^11.7.1",
48
48
  "lodash": "^4.17.21",