@atlaskit/editor-core 180.0.0 → 181.0.0

package/dist/cjs/plugins/type-ahead/ui/InputQuery.js

@@ -6,7 +6,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.InputQuery = void 0;
-var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
 var _react2 = require("@emotion/react");
@@ -18,11 +17,25 @@ var _typeAhead = require("@atlaskit/editor-common/type-ahead");
 var _AssistiveText = require("./AssistiveText");
 var _messages = require("../messages");
 var _reactIntlNext = require("react-intl-next");
-var colors = _interopRequireWildcard(require("@atlaskit/theme/colors"));
+var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 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); }
 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; }
 /** @jsx jsx */
 
+var querySpan = (0, _react2.css)({
+  outline: 'none',
+  '& input': {
+    width: '5px',
+    border: 'none',
+    background: 'transparent',
+    padding: 0,
+    margin: 0,
+    // ED-17022 Fixes firefox caret position
+    fontSize: '1em',
+    height: _editorSharedStyles.blockNodesVerticalMargin,
+    caretColor: "var(--ds-text-accent-blue, #0052CC)"
+  }
+});
 var isNavigationKey = function isNavigationKey(event) {
   return ['Enter', 'Tab', 'ArrowDown', 'ArrowUp'].includes(event.key);
 };
@@ -39,10 +52,6 @@ var isUndoRedoShortcut = function isUndoRedoShortcut(event) {
   }
   return false;
 };
-var isSelectAllShortcut = function isSelectAllShortcut(event) {
-  var key = (0, _w3cKeyname.keyName)(event);
-  return (event.ctrlKey || event.metaKey) && key === 'a';
-};
 var getAriaLabel = function getAriaLabel(triggerPrefix, intl) {
   switch (triggerPrefix) {
     case '@':
@@ -68,29 +77,31 @@ var InputQuery = /*#__PURE__*/_react.default.memo(function (_ref) {
     onUndoRedo = _ref.onUndoRedo,
     editorView = _ref.editorView,
     items = _ref.items;
-  var ref = (0, _react.useRef)(document.createElement('input'));
-  var sizeSpanRef = (0, _react.useRef)(document.createElement('span'));
-  var _useState = (0, _react.useState)([]),
+  var ref = (0, _react.useRef)(document.createElement('span'));
+  var inputRef = (0, _react.useRef)(null);
+  var _useState = (0, _react.useState)(null),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-    redoBuffer = _useState2[0],
-    setRedoBuffer = _useState2[1];
-  var _useState3 = (0, _react.useState)(reopenQuery),
-    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
-    query = _useState4[0],
-    setQuery = _useState4[1];
-  var onChange = (0, _react.useCallback)(function (event) {
-    var text = event.currentTarget.value;
-    sizeSpanRef.current.textContent = text;
-    setQuery(text);
+    query = _useState2[0],
+    setQuery = _useState2[1];
+  var cleanedInputContent = (0, _react.useCallback)(function () {
+    var _ref$current;
+    var raw = ((_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.textContent) || '';
+    return raw;
+  }, []);
+  var onKeyUp = (0, _react.useCallback)(function (event) {
+    var text = cleanedInputContent();
     onQueryChange(text);
-  }, [onQueryChange]);
-  var _useState5 = (0, _react.useState)(false),
-    _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
-    isInFocus = _useState6[0],
-    setInFocus = _useState6[1];
+  }, [onQueryChange, cleanedInputContent]);
+  var _useState3 = (0, _react.useState)(false),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    isInFocus = _useState4[0],
+    setInFocus = _useState4[1];
   var checkKeyEvent = (0, _react.useCallback)(function (event) {
+    var _ref$current2;
     var key = (0, _w3cKeyname.keyName)(event);
-    var text = ref.current.value;
+    var sel = document.getSelection();
+    var raw = ((_ref$current2 = ref.current) === null || _ref$current2 === void 0 ? void 0 : _ref$current2.textContent) || '';
+    var text = cleanedInputContent();
     var stopDefault = false;
     var _getPluginState = (0, _utils2.getPluginState)(editorView.state),
       selectedIndex = _getPluginState.selectedIndex;
@@ -121,7 +132,7 @@ var InputQuery = /*#__PURE__*/_react.default.memo(function (_ref) {
         stopDefault = true;
         break;
       case 'Backspace':
-        if (text.length === 0 || ref.current.selectionStart === 0) {
+        if (raw.length === 0 || (sel === null || sel === void 0 ? void 0 : sel.anchorOffset) === 0) {
           event.stopPropagation();
           event.preventDefault();
           cancel({
@@ -160,70 +171,24 @@ var InputQuery = /*#__PURE__*/_react.default.memo(function (_ref) {
         }
         break;
     }
-    if (isSelectAllShortcut(event)) {
-      cancel({
-        forceFocusOnEditor: true,
-        addPrefixTrigger: true,
-        text: ref.current.value,
-        setSelectionAt: _constants.CloseSelectionOptions.BEFORE_TEXT_INSERTED
-      });
-      return true;
-    }
     var undoRedoType = isUndoRedoShortcut(event);
-    var hasReopenQuery = reopenQuery && reopenQuery.length > 0;
-    if (onUndoRedo && undoRedoType) {
-      if (!hasReopenQuery && undoRedoType === 'historyUndo' && text.length > 0) {
-        setRedoBuffer(function (buffer) {
-          return [ref.current.value].concat((0, _toConsumableArray2.default)(buffer));
-        });
-        var undoValue = text.substring(0, text.length - 1);
-        ref.current.value = undoValue;
-        sizeSpanRef.current.textContent = undoValue;
-        stopDefault = true;
-      } else if (undoRedoType === 'historyRedo' && redoBuffer.length > 0) {
-        var redoValue = redoBuffer[0];
-        ref.current.value = redoValue;
-        sizeSpanRef.current.textContent = redoValue;
-        setRedoBuffer(function (buffer) {
-          return buffer.slice(1);
-        });
-        stopDefault = true;
-      } else {
-        stopDefault = onUndoRedo(undoRedoType);
-      }
+    if (onUndoRedo && undoRedoType && onUndoRedo(undoRedoType)) {
+      stopDefault = true;
     }
     if (isNavigationKey(event) || stopDefault) {
       event.stopPropagation();
       event.preventDefault();
       return false;
     }
-  }, [onUndoRedo, onItemSelect, selectNextItem, selectPreviousItem, cancel, editorView.state, redoBuffer, reopenQuery]);
+  }, [onUndoRedo, onItemSelect, selectNextItem, selectPreviousItem, cancel, cleanedInputContent, editorView.state]);
   var onClick = (0, _react.useCallback)(function (event) {
-    var _ref$current;
+    var _inputRef$current;
     event.stopPropagation();
     event.preventDefault();
     onQueryFocus();
-    (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.focus();
+    (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.focus();
     return false;
   }, [onQueryFocus]);
-  var queryStyle = (0, _react2.css)({
-    '&&': {
-      outline: 'none',
-      position: 'absolute',
-      fontFamily: 'inherit',
-      fontSize: 'inherit',
-      fontWeight: 'inherit',
-      letterSpacing: 'inherit',
-      padding: 0,
-      height: '100%',
-      width: '100%',
-      top: 0,
-      left: 0,
-      background: 'transparent',
-      border: 'none',
-      color: "".concat("var(--ds-link, ".concat(colors.B400, ")"))
-    }
-  });
   (0, _react.useLayoutEffect)(function () {
     if (!ref.current) {
       return;
@@ -235,18 +200,18 @@ var InputQuery = /*#__PURE__*/_react.default.memo(function (_ref) {
     var keyDown = function keyDown(event) {
       var key = (0, _w3cKeyname.keyName)(event);
       if (['ArrowLeft', 'ArrowRight'].includes(key) && document.getSelection && document.getSelection()) {
-        var _ref$current2, _ref$current3;
-        var q = ((_ref$current2 = ref.current) === null || _ref$current2 === void 0 ? void 0 : _ref$current2.value) || '';
-        var anchorOffset = (_ref$current3 = ref.current) === null || _ref$current3 === void 0 ? void 0 : _ref$current3.selectionStart;
-        var isMovingRight = 'ArrowRight' === key && anchorOffset === q.length;
-        var isMovingLeft = 'ArrowLeft' === key && (anchorOffset === 0 || event.metaKey);
+        var _ref$current3;
+        var q = ((_ref$current3 = ref.current) === null || _ref$current3 === void 0 ? void 0 : _ref$current3.textContent) || '';
+        var sel = document.getSelection();
+        var isMovingRight = sel && 'ArrowRight' === key && sel.anchorOffset === q.length;
+        var isMovingLeft = sel && 'ArrowLeft' === key && (sel.anchorOffset === 0 || event.metaKey);
         if (!isMovingRight && !isMovingLeft) {
           return;
         }
         cancel({
           forceFocusOnEditor: true,
           addPrefixTrigger: true,
-          text: ref.current.value,
+          text: cleanedInputContent(),
           setSelectionAt: isMovingRight ? _constants.CloseSelectionOptions.AFTER_TEXT_INSERTED : _constants.CloseSelectionOptions.BEFORE_TEXT_INSERTED
         });
         event.preventDefault();
@@ -277,8 +242,8 @@ var InputQuery = /*#__PURE__*/_react.default.memo(function (_ref) {
       }
       cancel({
         addPrefixTrigger: true,
-        text: ref.current.value,
-        setSelectionAt: _constants.CloseSelectionOptions.AFTER_TEXT_INSERTED,
+        text: cleanedInputContent(),
+        setSelectionAt: _constants.CloseSelectionOptions.BEFORE_TEXT_INSERTED,
         forceFocusOnEditor: false
       });
     };
@@ -294,7 +259,7 @@ var InputQuery = /*#__PURE__*/_react.default.memo(function (_ref) {
       var _target$textContent;
       setInFocus(false);
       var target = e.target;
-      if (e.isComposing || !(target instanceof HTMLInputElement)) {
+      if (e.isComposing || !(target instanceof HTMLElement)) {
         return;
       }
       if (e.inputType === 'historyUndo' && ((_target$textContent = target.textContent) === null || _target$textContent === void 0 ? void 0 : _target$textContent.length) === 0) {
@@ -303,6 +268,23 @@ var InputQuery = /*#__PURE__*/_react.default.memo(function (_ref) {
         close();
         return;
       }
+      if (e.data != null && inputRef.current === null) {
+        setQuery('');
+
+        // We need to change the content on Safari
+        // and set the cursor at the right place
+        if (_utils.browser.safari) {
+          e.preventDefault();
+          var dataElement = document.createTextNode(e.data);
+          element.appendChild(dataElement);
+          var sel = window.getSelection();
+          var range = document.createRange();
+          range.setStart(dataElement, dataElement.length);
+          range.collapse(true);
+          sel === null || sel === void 0 ? void 0 : sel.removeAllRanges();
+          sel === null || sel === void 0 ? void 0 : sel.addRange(range);
+        }
+      }
     };
     var onInput = null;
     if (_utils.browser.safari) {
@@ -312,7 +294,7 @@ var InputQuery = /*#__PURE__*/_react.default.memo(function (_ref) {
       var _onInput = function _onInput(e) {
         var _target$textContent2;
         var target = e.target;
-        if (e.isComposing || !(target instanceof HTMLInputElement)) {
+        if (e.isComposing || !(target instanceof HTMLElement)) {
           return;
         }
         if (e.inputType === 'historyUndo' && ((_target$textContent2 = target.textContent) === null || _target$textContent2 === void 0 ? void 0 : _target$textContent2.length) === 1) {
@@ -337,12 +319,11 @@ var InputQuery = /*#__PURE__*/_react.default.memo(function (_ref) {
         element.removeEventListener('input', onInput);
       }
     };
-  }, [triggerQueryPrefix, ref.current.value, onQueryFocus, cancel, checkKeyEvent, editorView.state]);
+  }, [triggerQueryPrefix, cleanedInputContent, onQueryFocus, cancel, checkKeyEvent, editorView.state]);
   (0, _react.useLayoutEffect)(function () {
     var hasReopenQuery = typeof reopenQuery === 'string' && reopenQuery.trim().length > 0;
     if (ref.current && forceFocus) {
-      ref.current.value = hasReopenQuery ? reopenQuery : '';
-      sizeSpanRef.current.textContent = hasReopenQuery ? reopenQuery : '';
+      setQuery(hasReopenQuery ? reopenQuery : null);
       requestAnimationFrame(function () {
         if (!(ref !== null && ref !== void 0 && ref.current)) {
           return;
@@ -370,20 +351,10 @@ var InputQuery = /*#__PURE__*/_react.default.memo(function (_ref) {
     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", {
-    style: {
-      position: 'relative'
-    }
-  }, (0, _react2.jsx)("span", {
-    ref: sizeSpanRef,
-    "aria-hidden": true,
-    style: {
-      marginLeft: '1px',
-      visibility: 'hidden'
-    }
-  }), (0, _react2.jsx)("input", {
-    css: queryStyle,
+    css: querySpan,
+    contentEditable: true,
     ref: ref,
-    onChange: onChange,
+    onKeyUp: onKeyUp,
     onClick: onClick,
     role: "combobox",
     "aria-controls": _constants.TYPE_AHEAD_DECORATION_ELEMENT_ID,
@@ -391,9 +362,11 @@ var InputQuery = /*#__PURE__*/_react.default.memo(function (_ref) {
     "aria-expanded": items.length !== 0,
     "aria-labelledby": assistiveHintID,
     suppressContentEditableWarning: true,
-    "data-query-prefix": triggerQueryPrefix,
-    value: query
-  })), (0, _react2.jsx)("span", {
+    "data-query-prefix": triggerQueryPrefix
+  }, query === null ? (0, _react2.jsx)("input", {
+    ref: inputRef,
+    type: "text"
+  }) : query), (0, _react2.jsx)("span", {
     id: assistiveHintID,
     style: {
       display: 'none'

package/dist/cjs/plugins/type-ahead/utils.js

@@ -3,31 +3,12 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.moveSelectedIndex = exports.isTypeAheadOpen = exports.isTypeAheadHandler = exports.isTypeAheadAllowed = exports.getTypeAheadQuery = exports.getTypeAheadListAriaLabels = exports.getTypeAheadHandler = exports.getPluginState = exports.findTypeAheadDecorations = exports.findHandlerByTrigger = exports.findHandler = void 0;
-var _prosemirrorState = require("prosemirror-state");
-var _prosemirrorView = require("prosemirror-view");
+exports.moveSelectedIndex = exports.isTypeAheadOpen = exports.isTypeAheadHandler = exports.isTypeAheadAllowed = exports.getTypeAheadQuery = exports.getTypeAheadListAriaLabels = exports.getTypeAheadHandler = exports.getPluginState = exports.findHandlerByTrigger = exports.findHandler = void 0;
 var _typeAhead = require("@atlaskit/editor-common/type-ahead");
 var _key = require("./pm-plugins/key");
 var _updateSelectedIndex = require("./commands/update-selected-index");
 var _statsModifier = require("./stats-modifier");
 var _messages = require("./messages");
-var findTypeAheadDecorations = function findTypeAheadDecorations(state) {
-  var selection = state.selection;
-  var _typeAheadPluginKey$g = _key.pluginKey.getState(state),
-    decorationSet = _typeAheadPluginKey$g.decorationSet;
-  if (!decorationSet || decorationSet === _prosemirrorView.DecorationSet.empty || !(selection instanceof _prosemirrorState.TextSelection) || !selection.$cursor) {
-    return null;
-  }
-  var pos = selection.$cursor.pos;
-  var decoration = decorationSet.find(pos, pos, function (spec) {
-    return spec === null || spec === void 0 ? void 0 : spec.isTypeAheadDecoration;
-  });
-  if (!decoration || decoration.length !== 1) {
-    return null;
-  }
-  return decoration[0];
-};
-exports.findTypeAheadDecorations = findTypeAheadDecorations;
 var isTypeAheadHandler = function isTypeAheadHandler(handler) {
   return handler && Object.values(_typeAhead.TypeAheadAvailableNodes).includes(handler.id) && typeof handler.trigger === 'string' && typeof handler.selectItem === 'function' && typeof handler.getItems === 'function';
 };
@@ -35,8 +16,8 @@ var isTypeAheadHandler = function isTypeAheadHandler(handler) {
 /** Is a typeahead plugin open? */
 exports.isTypeAheadHandler = isTypeAheadHandler;
 var isTypeAheadOpen = function isTypeAheadOpen(editorState) {
-  var _typeAheadPluginKey$g2, _typeAheadPluginKey$g3;
-  return (_key.pluginKey === null || _key.pluginKey === void 0 ? void 0 : (_typeAheadPluginKey$g2 = _key.pluginKey.getState(editorState)) === null || _typeAheadPluginKey$g2 === void 0 ? void 0 : (_typeAheadPluginKey$g3 = _typeAheadPluginKey$g2.decorationSet) === null || _typeAheadPluginKey$g3 === void 0 ? void 0 : _typeAheadPluginKey$g3.find().length) > 0;
+  var _typeAheadPluginKey$g, _typeAheadPluginKey$g2;
+  return (_key.pluginKey === null || _key.pluginKey === void 0 ? void 0 : (_typeAheadPluginKey$g = _key.pluginKey.getState(editorState)) === null || _typeAheadPluginKey$g === void 0 ? void 0 : (_typeAheadPluginKey$g2 = _typeAheadPluginKey$g.decorationSet) === null || _typeAheadPluginKey$g2 === void 0 ? void 0 : _typeAheadPluginKey$g2.find().length) > 0;
 };
 exports.isTypeAheadOpen = isTypeAheadOpen;
 var getPluginState = function getPluginState(editorState) {

package/dist/cjs/test-utils.js

@@ -28,12 +28,6 @@ Object.defineProperty(exports, "PortalProviderAPI", {
     return _PortalProvider.PortalProviderAPI;
   }
 });
-Object.defineProperty(exports, "Preset", {
-  enumerable: true,
-  get: function get() {
-    return _preset.Preset;
-  }
-});
 exports.createPMSchemaAndPlugins = void 0;
 Object.defineProperty(exports, "createTypeAheadTools", {
   enumerable: true,
@@ -48,11 +42,11 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _prosemirrorState = require("prosemirror-state");
 var _sortByOrder = require("./create-editor/sort-by-order");
-var _preset = require("./labs/next/presets/preset");
 var _createSchema = require("./create-editor/create-schema");
 var _base = _interopRequireDefault(require("./plugins/base"));
 var _pluginKey = require("./plugins/analytics/plugin-key");
 var _api = require("./plugins/type-ahead/api");
+var _preset = require("@atlaskit/editor-common/preset");
 var _PortalProvider = require("./ui/PortalProvider");
 var _eventDispatcher = require("./event-dispatcher");
 var _selection = require("./plugins/selection/gap-cursor/selection");
@@ -106,13 +100,11 @@ function lightProcessPluginsList(editorPlugins) {
   });
 }
 var createPMSchemaAndPlugins = function createPMSchemaAndPlugins() {
-  var preset = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : new _preset.Preset();
+  var inputPreset = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : new _preset.EditorPresetBuilder();
   return function (pluginFactoryParams) {
     var editorPlugins = [];
-    if (!preset.has(_base.default)) {
-      preset.add(_base.default);
-    }
-    editorPlugins = preset.getEditorPlugins();
+    var preset = inputPreset.has(_base.default) ? inputPreset : inputPreset.add(_base.default);
+    editorPlugins = preset.build();
     var editorConfig = lightProcessPluginsList(editorPlugins);
     var schema = (0, _createSchema.createSchema)(editorConfig);
     var plugins = editorConfig.plugins.sort((0, _sortByOrder.sortByOrder)('plugins')).map(function (_ref) {

package/dist/cjs/ui/Appearance/Comment/Toolbar.js

@@ -1,11 +1,12 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _typeof = require("@babel/runtime/helpers/typeof");
+var _typeof3 = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.mainToolbarCustomComponentsSlotStyle = exports.TableControlsPadding = exports.MainToolbar = void 0;
+var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _react = _interopRequireWildcard(require("react"));
@@ -15,7 +16,7 @@ var _colors = require("@atlaskit/theme/colors");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 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); }
-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; }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof3(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; }
 var TableControlsPadding = 20;
 exports.TableControlsPadding = TableControlsPadding;
 var mainToolbarWrapperStyle = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  position: relative;\n  align-items: center;\n  padding: ", "px ", "px 0;\n  display: flex;\n  height: auto;\n  background-color: ", ";\n  box-shadow: none;\n  padding-left: ", "px;\n\n  & > div {\n    > :first-child:not(style),\n    > style:first-child + * {\n      margin-left: 0;\n    }\n  }\n\n  .block-type-btn {\n    padding-left: 0;\n  }\n"])), (0, _constants.gridSize)(), (0, _constants.gridSize)(), "var(--ds-surface, white)", TableControlsPadding);
@@ -25,10 +26,18 @@ var StickyToolbar = function StickyToolbar(props) {
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     top = _useState2[0],
     setTop = _useState2[1];
+
+  // ED-15802: if externalToolbarRef is passed in, set top to externalToolbarRef?.current?.clientHeight
+  // else if offsetTop is a number set top to offsetTop
+  // otherwise top is 0 as initial state
   (0, _react.useEffect)(function () {
     var _props$externalToolba, _props$externalToolba2;
-    setTop(((_props$externalToolba = props.externalToolbarRef) === null || _props$externalToolba === void 0 ? void 0 : (_props$externalToolba2 = _props$externalToolba.current) === null || _props$externalToolba2 === void 0 ? void 0 : _props$externalToolba2.clientHeight) || 0);
-  }, [setTop, props.externalToolbarRef]);
+    if ((_props$externalToolba = props.externalToolbarRef) !== null && _props$externalToolba !== void 0 && (_props$externalToolba2 = _props$externalToolba.current) !== null && _props$externalToolba2 !== void 0 && _props$externalToolba2.clientHeight) {
+      setTop(props.externalToolbarRef.current.clientHeight);
+    } else {
+      setTop(props.offsetTop || 0);
+    }
+  }, [props.externalToolbarRef, props.offsetTop]);
   return (0, _react2.jsx)("div", {
     css: [mainToolbarWrapperStyle, stickyToolbarWrapperStyle, (0, _react2.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n          top: ", "px;\n        "])), top)],
     "data-testid": "ak-editor-main-toolbar",
@@ -41,13 +50,39 @@ var FixedToolbar = function FixedToolbar(props) {
     "data-testid": "ak-editor-main-toolbar"
   }, props.children);
 };
+
+/**
+ * ED-15802: Scenarios when a sticky bar is used:
+ * 1. useStickyToolbar is true
+ * 2. useStickyToolbar is a DOM element
+ * 3. useStickyToolbar is an object and has offsetTop key;
+ */
+var getStickyParameters = function getStickyParameters(configuration) {
+  // const isUsingStickyOffset, isHTMLElement is used so TS can properly infer types.
+  var isHTMLElement = (0, _typeof2.default)(configuration) === 'object' && !('offsetTop' in configuration);
+  var isUsingStickyOffset = (0, _typeof2.default)(configuration) === 'object' && 'offsetTop' in configuration;
+  if ((0, _typeof2.default)(configuration) !== 'object') {
+    return {
+      externalToolbarRef: undefined,
+      offsetTop: undefined
+    };
+  }
+  if (isUsingStickyOffset) {
+    return {
+      offsetTop: configuration.offsetTop
+    };
+  }
+  if (isHTMLElement) {
+    return {
+      externalToolbarRef: configuration
+    };
+  }
+};
 var MainToolbar = function MainToolbar(_ref) {
   var useStickyToolbar = _ref.useStickyToolbar,
     children = _ref.children;
-  if (!!useStickyToolbar) {
-    return (0, _react2.jsx)(StickyToolbar, {
-      externalToolbarRef: typeof useStickyToolbar === 'boolean' ? undefined : useStickyToolbar
-    }, children);
+  if (useStickyToolbar) {
+    return (0, _react2.jsx)(StickyToolbar, getStickyParameters(useStickyToolbar), children);
   }
   return (0, _react2.jsx)(FixedToolbar, null, children);
 };

package/dist/cjs/ui/ChromeCollapsed/index.js

@@ -56,6 +56,7 @@ var ChromeCollapsed = /*#__PURE__*/function (_PureComponent) {
     value: function render() {
       var placeholder = this.props.text || this.props.intl.formatMessage(_messages.messages.chromeCollapsedPlaceholder);
       return (0, _react2.jsx)("input", {
+        "data-testid": "chrome-collapsed",
         css: _styles.inputStyle,
         ref: this.handleInputRef,
         onFocus: this.focusHandler,

package/dist/cjs/ui/CollapsedEditor/index.js

@@ -15,6 +15,8 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _ui = require("@atlaskit/editor-common/ui");
 var _react = _interopRequireDefault(require("react"));
 var _editor = _interopRequireDefault(require("../../editor"));
+var _editorNext = _interopRequireDefault(require("../../editor-next"));
+var _editorMigrationComponent = _interopRequireDefault(require("../../editor-next/editor-migration-component"));
 var _EditorWithActions = _interopRequireDefault(require("../../labs/EditorWithActions"));
 var _ChromeCollapsed = _interopRequireDefault(require("../ChromeCollapsed"));
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
@@ -38,28 +40,20 @@ var CollapsedEditor = /*#__PURE__*/function (_React$Component) {
     return _this;
   }
   (0, _createClass2.default)(CollapsedEditor, [{
-    key: "UNSAFE_componentWillReceiveProps",
-    value: function UNSAFE_componentWillReceiveProps(nextProps) {
-      if (!this.props.isExpanded && nextProps.isExpanded) {
-        this.shouldTriggerExpandEvent = true;
-      }
-    }
-  }, {
     key: "componentDidUpdate",
     value: function componentDidUpdate() {
-      if (this.shouldTriggerExpandEvent && this.editorComponent) {
-        this.shouldTriggerExpandEvent = false;
-        if (this.props.onExpand) {
-          this.props.onExpand();
-        }
+      if (this.props.isExpanded && this.editorComponent && (!this.previouslyExpanded || this.previouslyExpanded === undefined)) {
+        var _this$props$onExpand, _this$props;
+        (_this$props$onExpand = (_this$props = this.props).onExpand) === null || _this$props$onExpand === void 0 ? void 0 : _this$props$onExpand.call(_this$props);
       }
+      this.previouslyExpanded = this.props.isExpanded;
     }
   }, {
     key: "render",
     value: function render() {
       var _this2 = this;
       var child = _react.default.Children.only(this.props.children);
-      if (child.type !== _editor.default && child.type !== _EditorWithActions.default) {
+      if (child.type !== _editor.default && child.type !== _EditorWithActions.default && child.type !== _editorNext.default && child.type !== _editorMigrationComponent.default) {
         throw new Error('Expected child to be of type `Editor`');
       }
       if (!this.props.isExpanded) {

package/dist/cjs/ui/ColorPalette/index.js

@@ -3,7 +3,25 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+Object.defineProperty(exports, "ColorPalette", {
+  enumerable: true,
+  get: function get() {
+    return _uiColor.ColorPalette;
+  }
+});
+Object.defineProperty(exports, "backgroundPaletteTooltipMessages", {
+  enumerable: true,
+  get: function get() {
+    return _uiColor.backgroundPaletteTooltipMessages;
+  }
+});
 exports.default = void 0;
+Object.defineProperty(exports, "textPaletteTooltipMessages", {
+  enumerable: true,
+  get: function get() {
+    return _uiColor.textPaletteTooltipMessages;
+  }
+});
 var _uiColor = require("@atlaskit/editor-common/ui-color");
 var _default = _uiColor.ColorPalette;
 exports.default = _default;