@atlaskit/editor-core 180.1.0 → 181.0.1

package/dist/es2019/plugins/type-ahead/index.js

@@ -111,6 +111,8 @@ const TypeAheadMenu = /*#__PURE__*/React.memo(({
  *
  */
 const typeAheadPlugin = options => {
+  var _options$useBetterTyp;
+  const useBetterTypeaheadNavigation = (_options$useBetterTyp = options === null || options === void 0 ? void 0 : options.useBetterTypeaheadNavigation) !== null && _options$useBetterTyp !== void 0 ? _options$useBetterTyp : true;
   const fireAnalyticsCallback = fireAnalyticsEvent(options === null || options === void 0 ? void 0 : options.createAnalyticsEvent);
   const popupMountRef = {
     current: null
@@ -136,7 +138,8 @@ const typeAheadPlugin = options => {
           popupMountRef,
           reactDispatch: dispatch,
           typeAheadHandlers: typeAhead,
-          createAnalyticsEvent: options === null || options === void 0 ? void 0 : options.createAnalyticsEvent
+          createAnalyticsEvent: options === null || options === void 0 ? void 0 : options.createAnalyticsEvent,
+          useBetterTypeaheadNavigation
         })
       }, {
         name: 'typeAheadInsertItem',

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

@@ -15,7 +15,8 @@ import { closeTypeAhead } from '../transforms/close-type-ahead';
 export const factoryDecorations = ({
   intl,
   popupMountRef,
-  createAnalyticsEvent
+  createAnalyticsEvent,
+  useBetterTypeaheadNavigation
 }) => {
   const createDecorations = (tr, {
     triggerHandler,
@@ -93,7 +94,8 @@ export const factoryDecorations = ({
         popupsBoundariesElement: (_popupMountRef$curren2 = popupMountRef.current) === null || _popupMountRef$curren2 === void 0 ? void 0 : _popupMountRef$curren2.popupsBoundariesElement,
         popupsScrollableElement: (_popupMountRef$curren3 = popupMountRef.current) === null || _popupMountRef$curren3 === void 0 ? void 0 : _popupMountRef$curren3.popupsScrollableElement,
         onUndoRedo: onUndoRedo,
-        reopenQuery: reopenQuery
+        reopenQuery: reopenQuery,
+        useBetterTypeaheadNavigation: useBetterTypeaheadNavigation
       })), typeaheadComponent);
       shouldFocusCursorInsideQuery = false;
       return typeaheadComponent;
@@ -145,39 +147,4 @@ export const factoryDecorations = ({
     createDecorations,
     removeDecorations
   };
-};
-export const isSelectionInsideTypeAhead = ({
-  decorationSet,
-  selection
-}) => {
-  if (!decorationSet || decorationSet === DecorationSet.empty) {
-    return false;
-  }
-  const typeAheadDecorations = decorationSet.find(undefined, undefined, spec => {
-    return spec.isTypeAheadDecoration;
-  });
-  if (!typeAheadDecorations || typeAheadDecorations.length === 0) {
-    return false;
-  }
-  return typeAheadDecorations.some(dec => {
-    return dec.from === selection.from && dec.to === selection.to;
-  });
-};
-export const findDecorationElement = ({
-  selection,
-  decorationSet
-}) => {
-  if (!decorationSet || decorationSet === DecorationSet.empty || !(selection instanceof TextSelection) || !selection.$cursor) {
-    return null;
-  }
-  const {
-    $cursor: {
-      pos
-    }
-  } = selection;
-  const decoration = decorationSet.find(pos, pos, spec => spec === null || spec === void 0 ? void 0 : spec.isTypeAheadDecoration);
-  if (!decoration || decoration.length !== 1) {
-    return null;
-  }
-  return document.querySelector(`#${decoration[0].spec.key}`);
 };

package/dist/es2019/plugins/type-ahead/pm-plugins/main.js

@@ -23,7 +23,8 @@ export function createPlugin({
   popupMountRef,
   createAnalyticsEvent,
   typeAheadHandlers,
-  getIntl
+  getIntl,
+  useBetterTypeaheadNavigation
 }) {
   const intl = getIntl();
   const {
@@ -32,7 +33,8 @@ export function createPlugin({
   } = factoryDecorations({
     intl,
     popupMountRef,
-    createAnalyticsEvent: createAnalyticsEvent
+    createAnalyticsEvent: createAnalyticsEvent,
+    useBetterTypeaheadNavigation
   });
   const reducer = createReducer({
     createDecorations,

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

@@ -65,7 +65,8 @@ export const InputQuery = /*#__PURE__*/React.memo(({
   onQueryFocus,
   onUndoRedo,
   editorView,
-  items
+  items,
+  useBetterTypeaheadNavigation
 }) => {
   const ref = useRef(document.createElement('span'));
   const inputRef = useRef(null);
@@ -134,6 +135,19 @@ export const InputQuery = /*#__PURE__*/React.memo(({
         // Some suggested the other workaround maybe listen on`keypress` instead of `keydown`
         if (!event.isComposing || event.which !== 229 && event.keyCode !== 229) {
           if (selectedIndex === -1) {
+            if (useBetterTypeaheadNavigation) {
+              /**
+               * TODO DTR-1401: (also see ED-17200) There are two options
+               * here, either
+               * - set the index directly to 1 in WrapperTypeAhead.tsx's
+               *   `insertSelectedItem` at the cost of breaking some of the a11y
+               *   focus changes,
+               * - or do this jank at the cost of some small analytics noise.
+               *
+               * The focus behaviour still needs cleanup
+               */
+              selectPreviousItem();
+            }
             selectNextItem();
           }
           onItemSelect(event.shiftKey ? SelectItemMode.SHIFT_ENTER : SelectItemMode.ENTER);
@@ -141,18 +155,41 @@ export const InputQuery = /*#__PURE__*/React.memo(({
         break;
       case 'Tab':
         if (selectedIndex === -1) {
+          if (useBetterTypeaheadNavigation) {
+            /**
+             * TODO DTR-1401: (also see ED-17200) There are two options
+             * here, either
+             * - set the index directly to 1 in WrapperTypeAhead.tsx's
+             *   `insertSelectedItem` at the cost of breaking some of the a11y
+             *   focus changes,
+             * - or do this jank at the cost of some small analytics noise.
+             *
+             */
+            selectPreviousItem();
+          }
           selectNextItem();
         }
+        // TODO DTR-1401: why is this calling select item when hitting tab? fix this in DTR-1401
         onItemSelect(SelectItemMode.TAB);
         break;
       case 'ArrowDown':
-        if (selectedIndex === -1) {
+        if (useBetterTypeaheadNavigation) {
           selectNextItem();
+        } else {
+          // TODO DTR-1401: why were we preventing selection?
+          if (selectedIndex === -1) {
+            selectNextItem();
+          }
         }
         break;
       case 'ArrowUp':
-        if (selectedIndex === -1) {
+        if (useBetterTypeaheadNavigation) {
           selectPreviousItem();
+        } else {
+          // TODO DTR-1401: why were we preventing selection?
+          if (selectedIndex === -1) {
+            selectPreviousItem();
+          }
         }
         break;
     }
@@ -165,7 +202,7 @@ export const InputQuery = /*#__PURE__*/React.memo(({
       event.preventDefault();
       return false;
     }
-  }, [onUndoRedo, onItemSelect, selectNextItem, selectPreviousItem, cancel, cleanedInputContent, editorView.state]);
+  }, [useBetterTypeaheadNavigation, onUndoRedo, onItemSelect, selectNextItem, selectPreviousItem, cancel, cleanedInputContent, editorView.state]);
   const onClick = useCallback(event => {
     var _inputRef$current;
     event.stopPropagation();

package/dist/es2019/plugins/type-ahead/ui/TypeAheadList.js

@@ -166,6 +166,8 @@ const TypeAheadListComponent = /*#__PURE__*/React.memo(({
             selectPreviousItem();
             event.preventDefault();
             break;
+
+          // TODO DTR-1401: why is this calling item click when hitting tab? fix this in DTR-1401
           case 'Tab':
             //Tab key quick inserts the selected item.
             onItemClick(SelectItemMode.TAB, selectedIndex);

package/dist/es2019/plugins/type-ahead/ui/WrapperTypeAhead.js

@@ -18,7 +18,8 @@ export const WrapperTypeAhead = /*#__PURE__*/React.memo(({
   inputMethod,
   getDecorationPosition,
   reopenQuery,
-  onUndoRedo
+  onUndoRedo,
+  useBetterTypeaheadNavigation
 }) => {
   const [closed, setClosed] = useState(false);
   const [query, setQuery] = useState(reopenQuery || '');
@@ -31,12 +32,14 @@ export const WrapperTypeAhead = /*#__PURE__*/React.memo(({
   const [onItemInsert, onTextInsert] = useItemInsert(triggerHandler, editorView, items);
   const selectNextItem = useMemo(() => moveSelectedIndex({
     editorView,
-    direction: 'next'
-  }), [editorView]);
+    direction: 'next',
+    useBetterTypeaheadNavigation
+  }), [editorView, useBetterTypeaheadNavigation]);
   const selectPreviousItem = useMemo(() => moveSelectedIndex({
     editorView,
-    direction: 'previous'
-  }), [editorView]);
+    direction: 'previous',
+    useBetterTypeaheadNavigation
+  }), [editorView, useBetterTypeaheadNavigation]);
   const cancel = useCallback(({
     setSelectionAt,
     addPrefixTrigger,
@@ -92,6 +95,7 @@ export const WrapperTypeAhead = /*#__PURE__*/React.memo(({
     return null;
   }
   return /*#__PURE__*/React.createElement(InputQuery, {
+    useBetterTypeaheadNavigation: useBetterTypeaheadNavigation,
     triggerQueryPrefix: triggerHandler.trigger,
     onQueryChange: setQuery,
     onItemSelect: insertSelectedItem,

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

@@ -1,31 +1,8 @@
-import { TextSelection } from 'prosemirror-state';
-import { DecorationSet } from 'prosemirror-view';
 import { TypeAheadAvailableNodes } from '@atlaskit/editor-common/type-ahead';
 import { pluginKey as typeAheadPluginKey } from './pm-plugins/key';
 import { updateSelectedIndex } from './commands/update-selected-index';
 import { StatsModifier } from './stats-modifier';
 import { typeAheadListMessages } from './messages';
-export const findTypeAheadDecorations = state => {
-  const {
-    selection
-  } = state;
-  const {
-    decorationSet
-  } = typeAheadPluginKey.getState(state);
-  if (!decorationSet || decorationSet === DecorationSet.empty || !(selection instanceof TextSelection) || !selection.$cursor) {
-    return null;
-  }
-  const {
-    $cursor: {
-      pos
-    }
-  } = selection;
-  const decoration = decorationSet.find(pos, pos, spec => spec === null || spec === void 0 ? void 0 : spec.isTypeAheadDecoration);
-  if (!decoration || decoration.length !== 1) {
-    return null;
-  }
-  return decoration[0];
-};
 export const isTypeAheadHandler = handler => {
   return handler && Object.values(TypeAheadAvailableNodes).includes(handler.id) && typeof handler.trigger === 'string' && typeof handler.selectItem === 'function' && typeof handler.getItems === 'function';
 };
@@ -75,7 +52,8 @@ export const findHandlerByTrigger = ({
 };
 export const moveSelectedIndex = ({
   editorView,
-  direction
+  direction,
+  useBetterTypeaheadNavigation
 }) => () => {
   const typeAheadState = getPluginState(editorView.state);
   if (!typeAheadState) {
@@ -89,7 +67,26 @@ export const moveSelectedIndex = ({
   let nextIndex;
   if (direction === 'next') {
     stats.increaseArrowDown();
-    nextIndex = selectedIndex >= items.length - 1 ? 0 : selectedIndex + 1;
+    if (useBetterTypeaheadNavigation) {
+      /**
+       * See: https://product-fabric.atlassian.net/browse/ED-17200
+       * `selectedIndex` is forced to -1 now to not immediately focus the typeahead
+       * and only do so when there is explicit logic to focus into the typeahead
+       * options.
+       *
+       * This check for "set index to 1 when -1"
+       * - is a temporary workaround to get back the previous behaviour without
+       *    entirely reverting the a11y improvements
+       *
+       */
+      if (selectedIndex === -1 && items.length > 1) {
+        nextIndex = 1;
+      } else {
+        nextIndex = selectedIndex >= items.length - 1 ? 0 : selectedIndex + 1;
+      }
+    } else {
+      nextIndex = selectedIndex >= items.length - 1 ? 0 : selectedIndex + 1;
+    }
   } else {
     stats.increaseArrowUp();
     nextIndex = selectedIndex <= 0 ? items.length - 1 : selectedIndex - 1;

package/dist/es2019/test-utils.js

@@ -1,11 +1,10 @@
 import { TextSelection } from 'prosemirror-state';
 import { sortByOrder } from './create-editor/sort-by-order';
-import { Preset } from './labs/next/presets/preset';
 import { createSchema } from './create-editor/create-schema';
 import basePlugin from './plugins/base';
 import { analyticsPluginKey } from './plugins/analytics/plugin-key';
 export { createTypeAheadTools } from './plugins/type-ahead/api';
-export { Preset } from './labs/next/presets/preset';
+import { EditorPresetBuilder } from '@atlaskit/editor-common/preset';
 export function getFireAnalytics(editorView) {
   var _analyticsPluginKey$g;
   return analyticsPluginKey === null || analyticsPluginKey === void 0 ? void 0 : (_analyticsPluginKey$g = analyticsPluginKey.getState(editorView.state)) === null || _analyticsPluginKey$g === void 0 ? void 0 : _analyticsPluginKey$g.fireAnalytics;
@@ -50,12 +49,10 @@ function lightProcessPluginsList(editorPlugins) {
     onEditorViewStateUpdatedCallbacks: []
   });
 }
-export const createPMSchemaAndPlugins = (preset = new Preset()) => pluginFactoryParams => {
+export const createPMSchemaAndPlugins = (inputPreset = new EditorPresetBuilder()) => pluginFactoryParams => {
   let editorPlugins = [];
-  if (!preset.has(basePlugin)) {
-    preset.add(basePlugin);
-  }
-  editorPlugins = preset.getEditorPlugins();
+  const preset = inputPreset.has(basePlugin) ? inputPreset : inputPreset.add(basePlugin);
+  editorPlugins = preset.build();
   const editorConfig = lightProcessPluginsList(editorPlugins);
   const schema = createSchema(editorConfig);
   const plugins = editorConfig.plugins.sort(sortByOrder('plugins')).map(({

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

@@ -41,10 +41,18 @@ const stickyToolbarWrapperStyle = css`
 `;
 const StickyToolbar = props => {
   const [top, setTop] = useState(0);
+
+  // 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
   useEffect(() => {
     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 jsx("div", {
     css: [mainToolbarWrapperStyle, stickyToolbarWrapperStyle, css`
           top: ${top}px;
@@ -57,14 +65,40 @@ const FixedToolbar = props => jsx("div", {
   css: mainToolbarWrapperStyle,
   "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;
+ */
+const getStickyParameters = configuration => {
+  // const isUsingStickyOffset, isHTMLElement is used so TS can properly infer types.
+  const isHTMLElement = typeof configuration === 'object' && !('offsetTop' in configuration);
+  const isUsingStickyOffset = typeof configuration === 'object' && 'offsetTop' in configuration;
+  if (typeof configuration !== 'object') {
+    return {
+      externalToolbarRef: undefined,
+      offsetTop: undefined
+    };
+  }
+  if (isUsingStickyOffset) {
+    return {
+      offsetTop: configuration.offsetTop
+    };
+  }
+  if (isHTMLElement) {
+    return {
+      externalToolbarRef: configuration
+    };
+  }
+};
 export const MainToolbar = ({
   useStickyToolbar,
   children
 }) => {
-  if (!!useStickyToolbar) {
-    return jsx(StickyToolbar, {
-      externalToolbarRef: typeof useStickyToolbar === 'boolean' ? undefined : useStickyToolbar
-    }, children);
+  if (useStickyToolbar) {
+    return jsx(StickyToolbar, getStickyParameters(useStickyToolbar), children);
   }
   return jsx(FixedToolbar, null, children);
 };

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

@@ -1,2 +1,3 @@
-import { ColorPalette } from '@atlaskit/editor-common/ui-color';
+import { ColorPalette, backgroundPaletteTooltipMessages, textPaletteTooltipMessages } from '@atlaskit/editor-common/ui-color';
+export { ColorPalette, backgroundPaletteTooltipMessages, textPaletteTooltipMessages };
 export default ColorPalette;

package/dist/es2019/ui/ColorPickerButton/index.js

@@ -127,13 +127,17 @@ const ColorPickerButton = props => {
       isOpenedByKeyboard: isOpenedByKeyboard,
       isPopupPositioned: isPopupPositioned
     }, jsx(ColorPaletteWithListeners, {
-      palette: props.colorPalette,
       cols: props.cols,
       selectedColor: selectedColor,
       onClick: onColorSelected,
       handleClickOutside: togglePopup,
       handleEscapeKeydown: handleEsc,
-      hexToPaletteColor: props.hexToPaletteColor
+      paletteOptions: {
+        palette: props.colorPalette,
+        hexToPaletteColor: props.hexToPaletteColor,
+        showSomewhatSemanticTooltips: props.showSomewhatSemanticTooltips,
+        paletteColorTooltipMessages: props.paletteColorTooltipMessages
+      }
     }))));
   };
   const title = props.title || '';

package/dist/es2019/ui/ConfigPanel/Fields/Expand.js

@@ -44,6 +44,7 @@ function Expand({
 }) {
   const [expanded, setExpanded] = useState(isExpanded);
   return jsx("div", {
+    "data-testid": "expand-config-field",
     css: expandContainer
   }, jsx("div", {
     css: expandControl

package/dist/es2019/ui/ConfigPanel/utils.js

@@ -2,12 +2,6 @@ import { ValidationError } from './types';
 export const validate = (field, value) => {
   return validateRequired(field, value);
 };
-export const fromEntries = iterable => {
-  return [...iterable].reduce((obj, [key, val]) => {
-    obj[key] = val;
-    return obj;
-  }, {});
-};
 const isEmptyString = value => typeof value === 'string' && value === '';
 const isEmptyArray = value => Array.isArray(value) && value.length === 0;
 export const validateRequired = ({

package/dist/es2019/ui/ContentStyles/index.js

@@ -78,7 +78,7 @@ const contentStyles = props => css`
   ${listsStyles}
   ${ruleStyles(props)}
   ${mediaStyles}
-  ${layoutStyles}
+  ${layoutStyles(props)}
   ${telepointerStyle}
   ${gapCursorStyles};
   ${tableStyles(props)}

package/dist/es2019/ui/ElementBrowser/ModalElementBrowser.js

@@ -124,7 +124,7 @@ const Footer = ({
 };
 const HelpLink = (url, helpText) => jsx(Button, {
   iconBefore: jsx(QuestionCircleIcon, {
-    label: "help",
+    label: "",
     size: "medium"
   }),
   appearance: "subtle-link",

package/dist/es2019/ui/ElementBrowser/constants.js

@@ -14,7 +14,6 @@ export const SIDEBAR_WIDTH = `${GRID_SIZE * 25}px`;
 export const SIDEBAR_HEADING_WRAPPER_HEIGHT = `${GRID_SIZE * 6}px`;
 export const SIDEBAR_HEADING_PADDING_LEFT = '12px';
 export const INLINE_SIDEBAR_HEIGHT = '54px';
-export const SEARCH_ITEM_MARGIN = '12px';
 export const SEARCH_ITEM_HEIGHT_WIDTH = '20px';
 export const SCROLLBAR_WIDTH = 15;
 export const ELEMENT_LIST_PADDING = 2;

package/dist/es2019/ui/Resizer/utils.js

@@ -6,7 +6,6 @@ export const snapTo = (target, points) => {
   });
 };
 export const handleSides = ['left', 'right'];
-export const alignmentLayouts = ['align-start', 'align-end'];
 export const imageAlignmentMap = {
   left: 'start',
   right: 'end'

package/dist/es2019/ui/styles.js

@@ -55,12 +55,6 @@ export const buttonContentStyle = css`
 export const buttonContentReducedSpacingStyle = css`
   padding: 8px;
 `;
-
-// Taken from the style of inline dialog components
-export const dropShadow = css`
-  box-shadow: ${`var(--ds-shadow-overlay, ${`0 0 1px rgba(9, 30, 66, 0.31),
-    0 4px 8px -2px rgba(9, 30, 66, 0.25)`})`};
-`;
 export const clickSelectWrapperStyle = css`
   user-select: all;
 `;

package/dist/es2019/utils/get-editor-plugins.js

@@ -1,4 +1,3 @@
-import { createEditorSelectionAPI } from '../selection-api/api';
 import createPluginsList from '../create-editor/create-plugins-list';
 
 /**
@@ -17,9 +16,8 @@ const getEditorPlugins = ({
 }) => {
   var _props$dangerouslyApp, _props$dangerouslyApp2;
   const dangerouslyAppendedPlugins = (_props$dangerouslyApp = (_props$dangerouslyApp2 = props.dangerouslyAppendPlugins) === null || _props$dangerouslyApp2 === void 0 ? void 0 : _props$dangerouslyApp2.__plugins) !== null && _props$dangerouslyApp !== void 0 ? _props$dangerouslyApp : [];
-  const selectionAPI = createEditorSelectionAPI();
   return [...createPluginsList(props, {
     appearance: prevAppearance
-  }, createAnalyticsEvent, insertNodeAPI, editorAnalyticsAPI, selectionAPI), ...dangerouslyAppendedPlugins];
+  }, createAnalyticsEvent), ...dangerouslyAppendedPlugins];
 };
 export default getEditorPlugins;