@atlaskit/editor-core 180.1.0 → 181.0.0

package/dist/es2019/labs/next/presets/useUniversalPreset.js

@@ -0,0 +1,25 @@
+import { useLayoutEffect, useState } from 'react';
+import { useAnalyticsEvents } from '@atlaskit/analytics-next';
+import { usePreviousState } from '@atlaskit/editor-common/hooks';
+import { createPreset } from '../../../create-editor/create-plugins-list';
+import { shouldRecreatePreset } from '../../../create-editor/preset-utils';
+export default function useUniversalPreset({
+  props
+}) {
+  const {
+    createAnalyticsEvent
+  } = useAnalyticsEvents();
+  const previousEditorProps = usePreviousState(props);
+  const [preset, setPreset] = useState(() => createPreset(props, previousEditorProps));
+  useLayoutEffect(() => {
+    if (!previousEditorProps) {
+      return;
+    }
+    const recreate = shouldRecreatePreset(previousEditorProps, props);
+    if (!recreate) {
+      return;
+    }
+    setPreset(createPreset(props, previousEditorProps, createAnalyticsEvent));
+  }, [props, previousEditorProps, createAnalyticsEvent]);
+  return preset;
+}

package/dist/es2019/plugins/analytics/plugin.js

@@ -22,6 +22,13 @@ function createPlugin(options) {
       },
       apply: (tr, pluginState, _, state) => {
         var _getFeatureFlags;
+        if (pluginState.createAnalyticsEvent !== options.createAnalyticsEvent) {
+          // When the plugin state is reconfigured, the init function isn't called again
+          return {
+            ...pluginState,
+            createAnalyticsEvent: options.createAnalyticsEvent
+          };
+        }
         if ((_getFeatureFlags = getFeatureFlags(state)) !== null && _getFeatureFlags !== void 0 && _getFeatureFlags.catchAllTracking) {
           const analyticsEventWithChannel = getAnalyticsEventsFromTransaction(tr);
           if (analyticsEventWithChannel.length > 0) {

package/dist/es2019/plugins/annotation/utils.js

@@ -24,7 +24,7 @@ export const surroundingMarks = $pos => {
  * Finds annotation marks, and returns their IDs.
  * @param marks Array of marks to search in
  */
-export const filterAnnotationIds = marks => {
+const filterAnnotationIds = marks => {
   if (!marks.length) {
     return [];
   }
@@ -44,7 +44,7 @@ export const filterAnnotationIds = marks => {
  * @param annotations annotation metadata
  * @param $from location to look around (usually the selection)
  */
-export const reorderAnnotations = (annotations, $from) => {
+const reorderAnnotations = (annotations, $from) => {
   const idSet = surroundingMarks($from).map(filterAnnotationIds);
   annotations.sort((a, b) => sum(idSet, ids => ids.indexOf(a.id)) - sum(idSet, ids => ids.indexOf(b.id)));
 };
@@ -84,34 +84,6 @@ const validateAnnotationMark = annotationMark => {
   }
 };
 
-// helper function: return the first selection range for the window
-const getSelectionRange = function () {
-  const selection = window.getSelection();
-
-  // no selection made in browser
-  if (!selection || selection.isCollapsed) {
-    return null;
-  }
-  const selectionRange = selection.getRangeAt(0);
-  return selectionRange;
-};
-
-// helper function: find the bounds of first part within selected content
-export const getSelectionStartRect = () => {
-  const range = getSelectionRange();
-  if (!range) {
-    return null;
-  }
-  const rects = range.getClientRects();
-  if (!rects.length) {
-    return null;
-  }
-  // Find first selection area that width is not 0
-  // Sometimes there is a chance that user is selecting an empty DOM node.
-  const firstRect = Array.from(rects).find(rect => rect.width !== 0 && rect.height !== 0);
-  return firstRect || null;
-};
-
 /*
  * add decoration for the comment selection in draft state
  * (when creating new comment)

package/dist/es2019/plugins/base/pm-plugins/react-nodeview.js

@@ -45,6 +45,4 @@ export const plugin = new SafePlugin({
       }
     };
   }
-});
-const plugins = () => [plugin];
-export default plugins;
+});

package/dist/es2019/plugins/block-type/pm-plugins/input-rule.js

@@ -10,22 +10,16 @@ function getHeadingLevel(match) {
     level: match[1].length
   };
 }
-export function headingRule(nodeType, maxLevel) {
+function headingRule(nodeType, maxLevel) {
   return createWrappingTextBlockRule({
     match: new RegExp('^(#{1,' + maxLevel + '})\\s$'),
     nodeType,
     getAttrs: getHeadingLevel
   });
 }
-export function blockQuoteRule(nodeType) {
+function blockQuoteRule(nodeType) {
   return createJoinNodesRule(/^\s*>\s$/, nodeType);
 }
-export function codeBlockRule(nodeType) {
-  return createWrappingTextBlockRule({
-    match: /^```$/,
-    nodeType
-  });
-}
 
 /**
  * Get heading rules
@@ -130,7 +124,7 @@ function getCodeBlockRules(schema) {
   });
   return [ruleAnalytics(threeTildeRule), ruleAnalytics(leftNodeReplacementThreeTildeRule)];
 }
-export function inputRulePlugin(schema, featureFlags) {
+function inputRulePlugin(schema, featureFlags) {
   const rules = [];
   if (schema.nodes.heading) {
     rules.push(...getHeadingRules(schema));

package/dist/es2019/plugins/caption/index.js

@@ -1,8 +1,6 @@
 import { caption } from '@atlaskit/adf-schema';
 import { default as createCaptionPlugin } from './pm-plugins/main';
-import { pluginKey } from './pm-plugins/plugin-key';
 import { captionKeymap } from './pm-plugins/keymap';
-export { pluginKey };
 const captionPlugin = () => {
   return {
     name: 'caption',

package/dist/es2019/plugins/card/nodeviews/blockCard.js

@@ -59,7 +59,8 @@ export class BlockCardComponent extends React.PureComponent {
     const {
       node,
       cardContext,
-      platform
+      platform,
+      showServerActions
     } = this.props;
     const {
       url,
@@ -74,7 +75,8 @@ export class BlockCardComponent extends React.PureComponent {
       onClick: this.onClick,
       onResolve: this.onResolve,
       showActions: platform === 'web',
-      platform: platform
+      platform: platform,
+      showServerActions: showServerActions
     }), this.gapCursorSpan());
     // [WS-2307]: we only render card wrapped into a Provider when the value is ready,
     // otherwise if we got data, we can render the card directly since it doesn't need the Provider
@@ -100,13 +102,15 @@ export class BlockCard extends ReactNodeView {
   }
   render() {
     const {
-      platform
+      platform,
+      showServerActions
     } = this.reactComponentProps;
     return /*#__PURE__*/React.createElement(WrappedBlockCard, {
       node: this.node,
       view: this.view,
       getPos: this.getPos,
-      platform: platform
+      platform: platform,
+      showServerActions: showServerActions
     });
   }
 }

package/dist/es2019/plugins/card/nodeviews/inlineCard.js

@@ -51,6 +51,7 @@ export class InlineCardComponent extends React.PureComponent {
     const {
       node,
       cardContext,
+      showServerActions,
       useAlternativePreloader
     } = this.props;
     const {
@@ -68,7 +69,8 @@ export class InlineCardComponent extends React.PureComponent {
       container: this.scrollContainer,
       onResolve: this.onResolve,
       onError: this.onError,
-      inlinePreloaderStyle: useAlternativePreloader ? 'on-right-without-skeleton' : undefined
+      inlinePreloaderStyle: useAlternativePreloader ? 'on-right-without-skeleton' : undefined,
+      showServerActions: showServerActions
     }));
     // [WS-2307]: we only render card wrapped into a Provider when the value is ready,
     // otherwise if we got data, we can render the card directly since it doesn't need the Provider
@@ -86,12 +88,14 @@ export function InlineCardNodeView(props) {
     useAlternativePreloader,
     node,
     view,
-    getPos
+    getPos,
+    showServerActions
   } = props;
   return /*#__PURE__*/React.createElement(WrappedInlineCard, {
     node: node,
     view: view,
     getPos: getPos,
+    showServerActions: showServerActions,
     useAlternativePreloader: useAlternativePreloader
   });
 }

package/dist/es2019/plugins/card/pm-plugins/main.js

@@ -16,7 +16,8 @@ export const createPlugin = options => pmPluginFactoryParams => {
     allowResizing,
     useAlternativePreloader,
     fullWidthMode,
-    createAnalyticsEvent
+    createAnalyticsEvent,
+    showServerActions
   } = options;
   return new SafePlugin({
     state: {
@@ -92,7 +93,8 @@ export const createPlugin = options => pmPluginFactoryParams => {
           pmPluginFactoryParams,
           Component: InlineCardNodeView,
           extraComponentProps: {
-            useAlternativePreloader
+            useAlternativePreloader,
+            showServerActions
           }
         }),
         blockCard: (node, view, getPos) => {
@@ -101,7 +103,8 @@ export const createPlugin = options => pmPluginFactoryParams => {
             eventDispatcher
           } = pmPluginFactoryParams;
           const reactComponentProps = {
-            platform
+            platform,
+            showServerActions
           };
           const hasIntlContext = true;
           return new BlockCard(node, view, getPos, portalProviderAPI, eventDispatcher, reactComponentProps, undefined, true, undefined, hasIntlContext).init();

package/dist/es2019/plugins/card/pm-plugins/util/resolve.js

@@ -21,6 +21,10 @@ export const resolveWithProvider = (view, outstandingRequests, provider, request
 };
 const updateCardType = (resolvedCard, options) => {
   if ((resolvedCard === null || resolvedCard === void 0 ? void 0 : resolvedCard.type) === 'blockCard' && !options.allowBlockCards || (resolvedCard === null || resolvedCard === void 0 ? void 0 : resolvedCard.type) === 'embedCard' && !options.allowEmbeds) {
+    // clean out the 'layout' attr from an embedCard type that should be transformed into the inlineCard type.
+    if (resolvedCard.type === 'embedCard') {
+      delete resolvedCard.attrs.layout;
+    }
     resolvedCard.type = 'inlineCard';
   }
 };

package/dist/es2019/plugins/code-block/pm-plugins/main-state.js

@@ -1,10 +1,2 @@
 import { pluginKey } from '../plugin-key';
-export const getPluginState = state => pluginKey.getState(state);
-export const setPluginState = stateProps => (state, dispatch) => {
-  const pluginState = getPluginState(state);
-  dispatch(state.tr.setMeta(pluginKey, {
-    ...pluginState,
-    ...stateProps
-  }));
-  return true;
-};
+export const getPluginState = state => pluginKey.getState(state);

package/dist/es2019/plugins/collab-edit/provider/index.js

@@ -1 +1 @@
-export { PubSubSpecialEventType } from './types';
+export {};

package/dist/es2019/plugins/collab-edit/provider/types.js

@@ -1,10 +1 @@
-/**
- * Same as PubSub client types (don't want a direct dep though)
- */
-
-export let PubSubSpecialEventType;
-(function (PubSubSpecialEventType) {
-  PubSubSpecialEventType["ERROR"] = "ERROR";
-  PubSubSpecialEventType["CONNECTED"] = "CONNECTED";
-  PubSubSpecialEventType["RECONNECT"] = "RECONNECT";
-})(PubSubSpecialEventType || (PubSubSpecialEventType = {}));
+export {};

package/dist/es2019/plugins/context-panel/index.js

@@ -1,9 +1,6 @@
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { PluginKey } from 'prosemirror-state';
 export const pluginKey = new PluginKey('contextPanelPluginKey');
-export function getPluginState(state) {
-  return pluginKey.getState(state);
-}
 function contextPanelPluginFactory(contextPanels, dispatch) {
   return new SafePlugin({
     key: pluginKey,

package/dist/es2019/plugins/data-consumer/index.js

@@ -1,11 +1,4 @@
 import { dataConsumer } from '@atlaskit/adf-schema';
-import { Plugin } from 'prosemirror-state';
-import { pluginKey } from './plugin-key';
-export function createPlugin() {
-  return new Plugin({
-    key: pluginKey
-  });
-}
 const dataConsumerMarkPlugin = () => ({
   name: 'dataConsumerPlugin',
   marks() {

package/dist/es2019/plugins/date/utils/internal.js

@@ -2,9 +2,6 @@ import { formatDateType, dateTypeToDate, dateToDateType } from './formatParse';
 import addDays from 'date-fns/addDays';
 import addMonths from 'date-fns/addMonths';
 import addYears from 'date-fns/addYears';
-export function padToTwo(number) {
-  return number <= 99 ? `0${number}`.slice(-2) : `${number}`;
-}
 function isDigit(c) {
   if (c === undefined) {
     return false;

package/dist/es2019/plugins/extension/commands.js

@@ -37,12 +37,6 @@ export const forceAutoSave = (resolve, reject) => createCommand({
     autoSaveReject: reject
   }
 }, applyChange);
-export const showContextPanel = createCommand({
-  type: 'UPDATE_STATE',
-  data: {
-    showContextPanel: true
-  }
-}, applyChange);
 export const updateExtensionLayout = layout => createCommand({
   type: 'UPDATE_STATE',
   data: {

package/dist/es2019/plugins/extension/ui/Extension/Extension/index.js

@@ -44,7 +44,10 @@ function ExtensionWithPluginState(props) {
     'with-children': hasChildren,
     'without-frame': removeBorder
   });
-  let customContainerStyles = {};
+  let customContainerStyles = {
+    width: '100%'
+  };
+  let newContentStyles = {};
   if (shouldBreakout) {
     const {
       type,
@@ -54,8 +57,15 @@ function ExtensionWithPluginState(props) {
       widthStateWidth: widthState.width,
       widthStateLineLength: widthState.lineLength
     });
+    newContentStyles = {
+      ...breakoutStyles
+    };
     customContainerStyles = breakoutStyles;
   }
+  newContentStyles = {
+    ...newContentStyles,
+    ...contentWrapper
+  };
   return jsx("div", {
     ref: handleRef,
     "data-layout": node.attrs.layout,
@@ -74,7 +84,7 @@ function ExtensionWithPluginState(props) {
   }, !removeBorder && jsx(ExtensionLozenge, {
     node: node
   }), children), hasBody && jsx("div", {
-    css: contentWrapper
+    css: newContentStyles
   }, jsx("div", {
     css: content,
     ref: handleContentDOMRef,

package/dist/es2019/plugins/extension/ui/Extension/Extension/styles.js

@@ -40,7 +40,10 @@ export const content = theme => css`
   border: 1px solid ${`var(--ds-border, ${N30})`};
   border-radius: ${borderRadius()}px;
   cursor: initial;
+  width: 100%;
 `;
 export const contentWrapper = css`
   padding: 0 ${padding}px ${padding}px;
+  display: flex;
+  justify-content: center;
 `;

package/dist/es2019/plugins/extension/ui/Extension/Lozenge.js

@@ -54,6 +54,7 @@ export default class ExtensionLozenge extends Component {
     const title = parameters && parameters.extensionTitle || parameters && parameters.macroMetadata && parameters.macroMetadata.title || extensionKey;
     const isBlockExtension = name === 'extension';
     return jsx("div", {
+      "data-testid": "lozenge-fallback",
       css: placeholderFallback
     }, lozengeData && !isBlockExtension ? this.renderImage({
       height: ICON_SIZE,

package/dist/es2019/plugins/feedback-dialog/index.js

@@ -1,11 +1,9 @@
 import React from 'react';
-import { PluginKey } from 'prosemirror-state';
 import { IconFeedback } from '../quick-insert/assets';
 import { version as coreVersion } from '../../version-wrapper';
 import { addAnalytics, ACTION, ACTION_SUBJECT, INPUT_METHOD, EVENT_TYPE } from '../analytics';
 import loadJiraCollectorDialogScript from './loadJiraCollectorDialogScript';
 import { messages } from '../insert-block/ui/ToolbarInsertBlock/messages';
-export const pluginKey = new PluginKey('feedbackDialogPlugin');
 let showJiraCollectorDialog;
 let feedbackInfoHash;
 let defaultFeedbackInfo;

package/dist/es2019/plugins/floating-toolbar/ui/Button.js

@@ -23,7 +23,9 @@ export default (({
   testId,
   hideTooltipOnClick = true,
   ariaHasPopup,
-  tabIndex
+  tabIndex,
+  areaControls,
+  ariaLabel
 }) => {
   // Check if there's only an icon and add additional styles
   const iconOnly = (icon || iconAfter) && !children;
@@ -55,8 +57,10 @@ export default (({
         ...rest
       };
     },
-    "aria-label": title,
-    "aria-pressed": selected,
+    "aria-label": ariaLabel || title,
+    "aria-pressed": !ariaHasPopup ? selected : undefined,
+    "aria-expanded": ariaHasPopup ? selected : undefined,
+    "aria-controls": ariaHasPopup ? areaControls : undefined,
     spacing: 'compact',
     href: href,
     target: target,

package/dist/es2019/plugins/floating-toolbar/ui/Dropdown.js

@@ -66,9 +66,10 @@ export default class Dropdown extends Component {
     });
     _defineProperty(this, "hideOnEsc", () => {
       var _document$querySelect;
-      this.hide();
-      //Focus the trigger button only on Escape
+      // Focus the trigger button only on Escape
+      // Focus is done before hiding to ensure onBlur is called
       (_document$querySelect = document.querySelector(`[data-testid=${this.props.buttonTestId}]`)) === null || _document$querySelect === void 0 ? void 0 : _document$querySelect.focus();
+      this.hide();
     });
     _defineProperty(this, "onOpenChanged", openChangedEvent => {
       if (!openChangedEvent.isOpen && openChangedEvent.event instanceof KeyboardEvent) {
@@ -94,7 +95,8 @@ export default class Dropdown extends Component {
       tooltip,
       buttonTestId,
       dropdownWidth,
-      editorView
+      editorView,
+      dropdownListId
     } = this.props;
     let trigger;
     if (icon) {
@@ -123,7 +125,9 @@ export default class Dropdown extends Component {
         onKeyDown: this.toggleOpenByKeyboard,
         selected: isOpen,
         disabled: disabled,
-        tooltipContent: tooltip
+        tooltipContent: tooltip,
+        ariaHasPopup: true,
+        areaControls: dropdownListId
       }, title);
     }
 
@@ -146,7 +150,8 @@ export default class Dropdown extends Component {
       fitWidth: fitWidth + fitTolerance,
       fitHeight: fitHeight + fitTolerance,
       trigger: trigger,
-      editorView: editorView
+      editorView: editorView,
+      dropdownListId: dropdownListId
     }, Array.isArray(options) ? this.renderArrayOptions(options) : options.render({
       hide: this.hide,
       dispatchCommand

package/dist/es2019/plugins/floating-toolbar/ui/EmojiPickerButton.js

@@ -13,14 +13,6 @@ import withOuterListeners from '../../../ui/with-outer-listeners';
 const emojiPickerButtonWrapper = css`
   position: relative;
 `;
-
-// helps to vertically align emoji picker
-// both top and bottom margin should be 2px
-// https://product-fabric.atlassian.net/browse/CETI-148
-const emojiPickerWrapper = css`
-  margin-bottom: -12px;
-  margin-top: -4px;
-`;
 const EmojiPickerWithListener = withOuterListeners(EmojiPicker);
 export const EmojiPickerButton = props => {
   const buttonRef = React.useRef(null);
@@ -75,13 +67,11 @@ export const EmojiPickerButton = props => {
       // we need an index of > 500 to display over it
       ,
       zIndex: props.setDisableParentScroll ? 600 : undefined
-    }, jsx("div", {
-      css: emojiPickerWrapper
     }, jsx(WithProviders, {
       providers: ['emojiProvider'],
       providerFactory: props.providerFactory,
       renderNode: renderPicker
-    })));
+    }));
   };
   const title = props.title || '';
   return jsx("div", {

package/dist/es2019/plugins/floating-toolbar/ui/ExtensionsPlaceholder.js

@@ -39,6 +39,7 @@ const ExtensionButton = props => {
   };
   return /*#__PURE__*/React.createElement(Button, {
     title: item.label,
+    ariaLabel: item.tooltip,
     icon: ButtonIcon ? /*#__PURE__*/React.createElement(ButtonIcon, {
       label: item.label || ''
     }) : undefined,

package/dist/es2019/plugins/floating-toolbar/ui/Toolbar.js

@@ -19,6 +19,7 @@ import Separator from './Separator';
 import Input from './Input';
 import { ExtensionsPlaceholder } from './ExtensionsPlaceholder';
 import ColorPickerButton from '../../../ui/ColorPickerButton';
+import { backgroundPaletteTooltipMessages } from '../../../ui/ColorPalette';
 import { EmojiPickerButton } from './EmojiPickerButton';
 import Announcer from '../../../utils/announcer/announcer';
 import { injectIntl } from 'react-intl-next';
@@ -45,6 +46,11 @@ const ToolbarItems = /*#__PURE__*/React.memo(({
   mountRef
 }) => {
   const emojiAndColourPickerMountPoint = scrollable ? popupsMountPoint || (editorView === null || editorView === void 0 ? void 0 : editorView.dom.closest('.fabric-editor-popup-scroll-parent')) || (editorView === null || editorView === void 0 ? void 0 : editorView.dom.closest('.ak-editor-content-area')) || undefined : popupsMountPoint;
+  const {
+    useSomewhatSemanticTextColorNames
+  } = editorView ? getFeatureFlags(editorView.state) : {
+    useSomewhatSemanticTextColorNames: false
+  };
   return jsx(ButtonGroup, null, items.filter(item => !item.hidden).map((item, idx) => {
     switch (item.type) {
       case 'button':
@@ -116,7 +122,8 @@ const ToolbarItems = /*#__PURE__*/React.memo(({
           showSelected: item.showSelected,
           buttonTestId: item.testId,
           editorView: editorView,
-          setDisableParentScroll: scrollable ? setDisableScroll : undefined
+          setDisableParentScroll: scrollable ? setDisableScroll : undefined,
+          dropdownListId: (item === null || item === void 0 ? void 0 : item.id) && `${item.id}-dropdownList`
         });
       case 'select':
         if (item.selectType === 'list') {
@@ -153,12 +160,22 @@ const ToolbarItems = /*#__PURE__*/React.memo(({
             // Currently in floating toolbar, color picker is only
             //  used in panel and table cell background color.
             // Both uses same color palette.
-            // That's why hard-coding hexToEditorBackgroundPaletteColor.
+            // That's why hard-coding hexToEditorBackgroundPaletteColor
+            //  and paletteColorTooltipMessages.
             // When we need to support different color palette
             //  in floating toolbar, we need to set hexToPaletteColor
-            //  in item options.
+            //  and paletteColorTooltipMessages in item options.
             ,
-            hexToPaletteColor: hexToEditorBackgroundPaletteColor
+            hexToPaletteColor: hexToEditorBackgroundPaletteColor,
+            paletteColorTooltipMessages: backgroundPaletteTooltipMessages
+            // We did not want to create new FF or update
+            //  useSomewhatSemanticTextColorNames name
+            //  because it is temporary and require extra work.
+            // So even though it says text color names,
+            //  we are going to use for all color pickers
+            //  such as text, background and table charts.
+            ,
+            showSomewhatSemanticTooltips: useSomewhatSemanticTextColorNames
           });
         }
         if (item.selectType === 'emoji') {

package/dist/es2019/plugins/floating-toolbar/utils.js

@@ -49,14 +49,4 @@ export function findNode(parent, predicate) {
     return true;
   });
   return matchedNode;
-}
-export function getFocusableElements(rootNode) {
-  if (!rootNode) {
-    return [];
-  }
-  const focusableModalElements = rootNode.querySelectorAll('a[href], button:not([disabled]), textarea, input, select') || [];
-  return Array.from(focusableModalElements) || [];
-}
-export function getFirstFocusableElement(rootNode) {
-  return getFocusableElements(rootNode)[0];
 }

package/dist/es2019/plugins/fragment/index.js

@@ -1,12 +1,5 @@
 import { fragment } from '@atlaskit/adf-schema';
-import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
-import { pluginKey } from './plugin-key';
 import { createPlugin as createFragmentMarkConsistencyPlugin } from './pm-plugins/fragment-consistency';
-export function createPlugin() {
-  return new SafePlugin({
-    key: pluginKey
-  });
-}
 const fragmentMarkPlugin = () => ({
   name: 'fragmentPlugin',
   marks() {

package/dist/es2019/plugins/help-dialog/commands.js

@@ -10,5 +10,4 @@ export const openHelpCommand = (tr, dispatch) => {
 export const closeHelpCommand = (tr, dispatch) => {
   tr = tr.setMeta(pluginKey, false);
   dispatch(tr);
-};
-export const stopPropagationCommand = e => e.stopPropagation();
+};