@atlaskit/editor-core 174.0.0 → 175.0.0

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

@@ -5,6 +5,9 @@ import { findParentNodeOfType } from 'prosemirror-utils';
 import { isWrappingPossible } from '../utils/selection';
 import { isListNode } from '../utils/node';
 import { pluginFactory } from '../../../utils/plugin-state-factory';
+import { setGapCursorSelection } from '../../../utils';
+import { Side } from '../../selection/gap-cursor-selection';
+import { listPaddingLeftMarkerSpace, CodeBlockSharedCssClassName } from '@atlaskit/editor-common/styles';
 const listPluginKey = new PluginKey('listPlugin');
 export const pluginKey = listPluginKey;
 const initialState = {
@@ -115,7 +118,38 @@ export const createPlugin = eventDispatch => new SafePlugin({
         decorationSet
       } = getPluginState(state);
       return decorationSet;
-    }
+    },
+
+    handleClick: (view, pos, event) => {
+      const {
+        state
+      } = view;
+
+      if (['LI', 'UL'].includes((event === null || event === void 0 ? void 0 : event.target).tagName)) {
+        var _nodeAtPos$firstChild;
+
+        const nodeAtPos = state.tr.doc.nodeAt(pos);
+        const {
+          listItem,
+          codeBlock
+        } = view.state.schema.nodes;
+
+        if ((nodeAtPos === null || nodeAtPos === void 0 ? void 0 : nodeAtPos.type) === listItem && (nodeAtPos === null || nodeAtPos === void 0 ? void 0 : (_nodeAtPos$firstChild = nodeAtPos.firstChild) === null || _nodeAtPos$firstChild === void 0 ? void 0 : _nodeAtPos$firstChild.type) === codeBlock) {
+          var _document, _document$elementFrom;
 
+          const bufferPx = 50;
+          const isCodeBlockNextToListMarker = Boolean((_document = document) === null || _document === void 0 ? void 0 : (_document$elementFrom = _document.elementFromPoint(event.clientX + (listPaddingLeftMarkerSpace + bufferPx), event.clientY)) === null || _document$elementFrom === void 0 ? void 0 : _document$elementFrom.closest(`.${CodeBlockSharedCssClassName.CODEBLOCK_CONTAINER}`));
+
+          if (isCodeBlockNextToListMarker) {
+            // +1 needed to put cursor inside li
+            // otherwise gap cursor markup will be injected as immediate child of ul resulting in invalid html
+            setGapCursorSelection(view, pos + 1, Side.LEFT);
+            return true;
+          }
+        }
+      }
+
+      return false;
+    }
   }
 });

package/dist/es2019/plugins/list/styles.js

@@ -1,5 +1,7 @@
 import { css } from '@emotion/react';
 import { blockNodesVerticalMargin } from '@atlaskit/editor-shared-styles';
+import { browser } from '@atlaskit/editor-common/utils';
+import { codeBlockInListSafariFix } from '@atlaskit/editor-common/styles';
 export const listsStyles = css`
   .ProseMirror li {
     position: relative;
@@ -14,5 +16,7 @@ export const listsStyles = css`
     > style:first-child + p {
       margin-top: ${blockNodesVerticalMargin};
     }
+
+    ${browser.safari ? codeBlockInListSafariFix : ''}
   }
 `;

package/dist/es2019/plugins/list/transforms.js

@@ -49,10 +49,35 @@ export function liftFollowingList(from, to, rootListDepth, tr) {
       }
     }
   });
+  return tr;
+}
+export function liftNodeSelectionList(selection, tr) {
+  const {
+    from
+  } = selection;
+  const {
+    listItem
+  } = tr.doc.type.schema.nodes;
+  const mappedPosition = tr.mapping.map(from);
+  const nodeAtPos = tr.doc.nodeAt(mappedPosition);
+  const start = tr.doc.resolve(mappedPosition);
+
+  if ((start === null || start === void 0 ? void 0 : start.parent.type) !== listItem) {
+    return tr;
+  }
+
+  const end = tr.doc.resolve(mappedPosition + ((nodeAtPos === null || nodeAtPos === void 0 ? void 0 : nodeAtPos.nodeSize) || 1));
+  const range = start.blockRange(end);
+
+  if (range) {
+    const liftTarget = getListLiftTarget(start);
+    tr.lift(range, liftTarget);
+  }
+
   return tr;
 } // The function will list paragraphs in selection out to level 1 below root list.
 
-export function liftSelectionList(selection, tr) {
+export function liftTextSelectionList(selection, tr) {
   const {
     from,
     to
@@ -240,8 +265,15 @@ export const splitIntoParagraphs = ({
     paragraph
   } = schema.nodes;
   fragment.forEach((node, i) => {
-    // ED-14725 Fixed the issue that it make duplicated line
+    const isNodeValidContentForParagraph = schema.nodes.paragraph.validContent(Fragment.from(node));
+
+    if (!isNodeValidContentForParagraph) {
+      paragraphs.push(node);
+      return;
+    } // ED-14725 Fixed the issue that it make duplicated line
     // when pasting <br /> from google docs.
+
+
     if (i === 0 && node.type === hardBreak) {
       paragraphs.push(paragraph.createChecked(undefined, curChildren, [...blockMarks]));
       lastNode = node;

package/dist/es2019/plugins/list/utils/selection.js

@@ -15,7 +15,14 @@ export const isWrappingPossible = (nodeType, selection) => {
     $from,
     $to
   } = selection;
-  const range = $from.blockRange($to);
+  let range;
+
+  if (selection instanceof GapCursorSelection && $from.nodeAfter) {
+    const nodeSize = $from.nodeAfter.nodeSize || 1;
+    range = $from.blockRange($from.doc.resolve($from.pos + nodeSize));
+  } else {
+    range = $from.blockRange($to);
+  }
 
   if (!range) {
     return false;

package/dist/es2019/plugins/media/nodeviews/mediaGroup.js

@@ -61,6 +61,7 @@ class MediaGroup extends React.Component {
       const {
         node
       } = props;
+      const oldMediaNodes = this.mediaNodes;
       this.mediaNodes = [];
       node.forEach((item, childOffset) => {
         this.mediaPluginState.mediaGroupNodes[item.attrs.id] = {
@@ -69,6 +70,7 @@ class MediaGroup extends React.Component {
         };
         this.mediaNodes.push(item);
       });
+      this.mediaPluginState.handleMediaGroupUpdate(oldMediaNodes, this.mediaNodes);
     });
 
     _defineProperty(this, "getIdentifier", item => {
@@ -189,6 +191,10 @@ class MediaGroup extends React.Component {
     });
   }
 
+  componentWillUnmount() {
+    this.mediaPluginState.handleMediaGroupUpdate(this.mediaNodes, []);
+  }
+
   UNSAFE_componentWillReceiveProps(props) {
     this.updateMediaClientConfig();
     this.setMediaItems(props);

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

@@ -23,6 +23,7 @@ import { getMediaFeatureFlag } from '@atlaskit/media-common';
 import { isInListItem } from '../../../utils';
 import { CAPTION_PLACEHOLDER_ID } from '../ui/CaptionPlaceholder';
 import { RawIntlProvider } from 'react-intl-next';
+import { MediaTaskManager } from './mediaTaskManager';
 export { stateKey } from './plugin-key';
 
 const createDropPlaceholder = (intl, allowDropLine) => {
@@ -65,14 +66,16 @@ export class MediaPluginStateImplementation {
 
     _defineProperty(this, "mediaGroupNodes", {});
 
-    _defineProperty(this, "pendingTask", Promise.resolve(null));
-
     _defineProperty(this, "destroyed", false);
 
     _defineProperty(this, "removeOnCloseListener", () => {});
 
     _defineProperty(this, "onPopupToggleCallback", () => {});
 
+    _defineProperty(this, "nodeCount", new Map());
+
+    _defineProperty(this, "taskManager", new MediaTaskManager());
+
     _defineProperty(this, "pickers", []);
 
     _defineProperty(this, "pickerPromises", []);
@@ -210,16 +213,15 @@ export class MediaPluginStateImplementation {
       const isEndState = state => state.status && MEDIA_RESOLVED_STATES.indexOf(state.status) !== -1;
 
       if (!isEndState(mediaStateWithContext)) {
-        // Chain the previous promise with a new one for this media item
-        this.addPendingTask(new Promise(resolve => {
+        const uploadingPromise = new Promise(resolve => {
           onMediaStateChanged(newState => {
             // When media item reaches its final state, remove listener and resolve
             if (isEndState(newState)) {
               resolve(newState);
             }
           });
-        }));
-        this.pendingTask.then(() => {
+        });
+        this.taskManager.addPendingTask(uploadingPromise, mediaStateWithContext.id).then(() => {
           this.updateAndDispatch({
             allUploadsFinished: true
           });
@@ -236,12 +238,8 @@ export class MediaPluginStateImplementation {
       }
     });
 
-    _defineProperty(this, "addPendingTask", promise => {
-      const currentPendingTask = this.pendingTask;
-
-      const pendingPromise = () => currentPendingTask;
-
-      this.pendingTask = promise.then(pendingPromise, pendingPromise);
+    _defineProperty(this, "addPendingTask", task => {
+      this.taskManager.addPendingTask(task);
     });
 
     _defineProperty(this, "splitMediaGroup", () => splitMediaGroup(this.view));
@@ -266,40 +264,46 @@ export class MediaPluginStateImplementation {
       this.onPopupToggleCallback = onPopupToggleCallback;
     });
 
-    _defineProperty(this, "waitForPendingTasks", (timeout, lastTask) => {
-      if (lastTask && this.pendingTask === lastTask) {
-        return lastTask;
+    _defineProperty(this, "waitForPendingTasks", this.taskManager.waitForPendingTasks);
+
+    _defineProperty(this, "handleMediaNodeRemoval", (node, getPos) => {
+      let getNode = node;
+
+      if (!getNode) {
+        getNode = this.view.state.doc.nodeAt(getPos());
       }
 
-      const chainedPromise = this.pendingTask.then(() => // Call ourselves to make sure that no new pending tasks have been
-      // added before the current promise has resolved.
-      this.waitForPendingTasks(undefined, this.pendingTask));
+      removeMediaNode(this.view, getNode, getPos);
+    });
+
+    _defineProperty(this, "trackMediaNodeAddition", node => {
+      var _this$nodeCount$get;
 
-      if (!timeout) {
-        return chainedPromise;
+      const id = node.attrs.id;
+      const count = (_this$nodeCount$get = this.nodeCount.get(id)) !== null && _this$nodeCount$get !== void 0 ? _this$nodeCount$get : 0;
+
+      if (count === 0) {
+        this.taskManager.resumePendingTask(id);
       }
 
-      let rejectTimeout;
-      const timeoutPromise = new Promise((_resolve, reject) => {
-        rejectTimeout = window.setTimeout(() => reject(new Error(`Media operations did not finish in ${timeout} ms`)), timeout);
-      });
-      return Promise.race([timeoutPromise, chainedPromise.then(value => {
-        clearTimeout(rejectTimeout);
-        return value;
-      })]);
+      this.nodeCount.set(id, count + 1);
     });
 
-    _defineProperty(this, "handleMediaNodeRemoval", (node, getPos) => {
-      let getNode = node;
+    _defineProperty(this, "trackMediaNodeRemoval", node => {
+      var _this$nodeCount$get2;
 
-      if (!getNode) {
-        getNode = this.view.state.doc.nodeAt(getPos());
+      const id = node.attrs.id;
+      const count = (_this$nodeCount$get2 = this.nodeCount.get(id)) !== null && _this$nodeCount$get2 !== void 0 ? _this$nodeCount$get2 : 0;
+
+      if (count === 1) {
+        this.taskManager.cancelPendingTask(id);
       }
 
-      removeMediaNode(this.view, getNode, getPos);
+      this.nodeCount.set(id, count - 1);
     });
 
     _defineProperty(this, "handleMediaNodeMount", (node, getPos) => {
+      this.trackMediaNodeAddition(node);
       this.mediaNodes.unshift({
         node,
         getPos
@@ -307,11 +311,23 @@ export class MediaPluginStateImplementation {
     });
 
     _defineProperty(this, "handleMediaNodeUnmount", oldNode => {
+      this.trackMediaNodeRemoval(oldNode);
       this.mediaNodes = this.mediaNodes.filter(({
         node
       }) => oldNode !== node);
     });
 
+    _defineProperty(this, "handleMediaGroupUpdate", (oldNodes, newNodes) => {
+      const addedNodes = newNodes.filter(node => oldNodes.every(oldNode => oldNode.attrs.id !== node.attrs.id));
+      const removedNodes = oldNodes.filter(node => newNodes.every(newNode => newNode.attrs.id !== node.attrs.id));
+      addedNodes.forEach(node => {
+        this.trackMediaNodeAddition(node);
+      });
+      removedNodes.forEach(oldNode => {
+        this.trackMediaNodeRemoval(oldNode);
+      });
+    });
+
     _defineProperty(this, "findMediaNode", id => {
       return helpers.findMediaSingleNode(this, id);
     });

package/dist/es2019/plugins/media/pm-plugins/mediaTaskManager.js

@@ -0,0 +1,78 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+export class MediaTaskManager {
+  constructor() {
+    _defineProperty(this, "pendingTask", Promise.resolve(null));
+
+    _defineProperty(this, "taskMap", new Map());
+
+    _defineProperty(this, "cancelPendingTask", id => {
+      const task = this.taskMap.get(id);
+
+      if (task && !task.cancelController.signal.aborted) {
+        task.cancelController.abort();
+      }
+    });
+
+    _defineProperty(this, "waitForPendingTasks", async (timeout, lastTask) => {
+      if (lastTask && this.pendingTask === lastTask) {
+        return lastTask;
+      }
+
+      const chainedPromise = this.pendingTask.then(() => // Call ourselves to make sure that no new pending tasks have been
+      // added before the current promise has resolved.
+      this.waitForPendingTasks(undefined, this.pendingTask));
+
+      if (!timeout) {
+        return chainedPromise;
+      }
+
+      let rejectTimeout;
+      const timeoutPromise = new Promise((_resolve, reject) => {
+        rejectTimeout = window.setTimeout(() => reject(new Error(`Media operations did not finish in ${timeout} ms`)), timeout);
+      });
+      return Promise.race([timeoutPromise, chainedPromise.then(value => {
+        clearTimeout(rejectTimeout);
+        return value;
+      })]);
+    });
+
+    _defineProperty(this, "resumePendingTask", id => {
+      const mediaTask = this.taskMap.get(id);
+
+      if (mediaTask && mediaTask.cancelController.signal.aborted) {
+        this.addPendingTask(mediaTask.task, id);
+      }
+    });
+
+    _defineProperty(this, "addPendingTask", (task, id) => {
+      let currentTask = task;
+
+      if (id) {
+        const cancelController = new AbortController();
+        const signal = cancelController.signal;
+        this.taskMap.set(id, {
+          task,
+          cancelController
+        });
+        currentTask = new Promise(resolve => {
+          task.then(resolve, resolve).finally(() => {
+            this.taskMap.delete(id);
+          });
+
+          signal.onabort = () => {
+            resolve(null);
+          };
+        });
+      } // Chain the previous promise with a new one for this media item
+
+
+      const currentPendingTask = this.pendingTask;
+
+      const pendingPromise = () => currentPendingTask;
+
+      this.pendingTask = currentTask.then(pendingPromise, pendingPromise);
+      return this.pendingTask;
+    });
+  }
+
+}

package/dist/es2019/plugins/media/toolbar/index.js

@@ -21,7 +21,6 @@ import { FilePreviewItem } from './filePreviewItem';
 import { downloadMedia, removeMediaGroupNode } from './utils';
 import { changeInlineToMediaCard, changeMediaCardToInline, removeInlineCard } from './commands';
 import { MediaInlineNodeSelector, MediaSingleNodeSelector } from '../nodeviews/styles';
-import { getCopyButtonConfig, showCopyButton } from '../../copy-button/toolbar';
 
 const remove = (state, dispatch) => {
   if (dispatch) {
@@ -91,9 +90,16 @@ const generateMediaCardFloatingToolbar = (state, intl, mediaPluginState) => {
     title: intl.formatMessage(messages.download)
   }, {
     type: 'separator'
-  }, ...(state && showCopyButton(state) ? [getCopyButtonConfig(state, intl.formatMessage, mediaGroup), {
-    type: 'separator'
-  }] : []), {
+  }, {
+    type: 'copy-button',
+    items: [{
+      state,
+      formatMessage: intl.formatMessage,
+      nodeType: mediaGroup
+    }, {
+      type: 'separator'
+    }]
+  }, {
     id: 'editor.media.delete',
     type: 'button',
     appearance: 'danger',
@@ -159,9 +165,16 @@ const generateMediaInlineFloatingToolbar = (state, intl, mediaPluginState) => {
     title: intl.formatMessage(messages.download)
   }, {
     type: 'separator'
-  }, ...(state && showCopyButton(state) ? [getCopyButtonConfig(state, intl.formatMessage, mediaInline), {
-    type: 'separator'
-  }] : []), {
+  }, {
+    type: 'copy-button',
+    items: [{
+      state,
+      formatMessage: intl.formatMessage,
+      nodeType: mediaInline
+    }, {
+      type: 'separator'
+    }]
+  }, {
     id: 'editor.media.delete',
     type: 'button',
     appearance: 'danger',
@@ -267,9 +280,16 @@ const generateMediaSingleFloatingToolbar = (state, intl, options, pluginState, m
     onClick: remove,
     testId: 'media-toolbar-remove-button'
   };
-  const items = [...toolbarButtons, ...(state && showCopyButton(state) ? [getCopyButtonConfig(state, intl.formatMessage, mediaSingle), {
-    type: 'separator'
-  }] : []), removeButton];
+  const items = [...toolbarButtons, {
+    type: 'copy-button',
+    items: [{
+      state,
+      formatMessage: intl.formatMessage,
+      nodeType: mediaSingle
+    }, {
+      type: 'separator'
+    }]
+  }, removeButton];
   return items;
 };
 
@@ -359,6 +379,7 @@ export const floatingToolbar = (state, intl, options = {}) => {
   }
 
   return { ...baseToolbar,
-    items
+    items,
+    scrollable: true
   };
 };

package/dist/es2019/plugins/media/ui/ResizableMediaSingle/index.js

@@ -12,7 +12,6 @@ import { wrapperStyle } from './styled';
 import Resizer from '../../../../ui/Resizer';
 import { snapTo, handleSides, imageAlignmentMap } from '../../../../ui/Resizer/utils';
 import { calcMediaPxWidth } from '../../utils/media-single';
-import { getPluginState } from '../../../table/pm-plugins/table-resizing/plugin-factory';
 import { calculateSnapPoints } from '../../../../utils/rich-media-utils';
 export default class ResizableMediaSingle extends React.Component {
   constructor(...args) {
@@ -290,9 +289,6 @@ export default class ResizableMediaSingle extends React.Component {
       containerWidth,
       fullWidthMode,
       selected,
-      view: {
-        state
-      },
       children
     } = this.props;
     const initialWidth = this.calcPxWidth(); // width with padding
@@ -343,10 +339,6 @@ export default class ResizableMediaSingle extends React.Component {
       snapPoints: calculateSnapPoints(snapPointsProps),
       scaleFactor: !this.wrappedLayout && !this.insideInlineLike ? 2 : 1,
       highlights: this.highlights,
-      handleResizeStart: () => {
-        const columResizingPluginState = getPluginState(state);
-        return columResizingPluginState ? !columResizingPluginState.dragging : true;
-      },
       nodeType: "media",
       dispatchAnalyticsEvent: this.props.dispatchAnalyticsEvent // when cursor is located below a media with caption,
       // press “Up“ key will result cursor focus on an invalid position, (on the resize handler)

package/dist/es2019/plugins/media/utils/media-single.js

@@ -100,8 +100,8 @@ export const insertMediaSingleNode = (view, mediaState, inputMethod, collection,
     state,
     dispatch
   } = view;
-  const grandParentType = (_state$selection$$fro = state.selection.$from.node(-1)) === null || _state$selection$$fro === void 0 ? void 0 : _state$selection$$fro.type;
-  const parentType = state.selection.$from.parent.type;
+  const grandParentNodeType = (_state$selection$$fro = state.selection.$from.node(-1)) === null || _state$selection$$fro === void 0 ? void 0 : _state$selection$$fro.type;
+  const parentNodeType = state.selection.$from.parent.type;
   const node = createMediaSingleNode(state.schema, collection, alignLeftOnInsert)(mediaState);
   let fileExtension;
 
@@ -112,7 +112,11 @@ export const insertMediaSingleNode = (view, mediaState, inputMethod, collection,
   // and the parent node is a paragraph
 
 
-  if (shouldSplitSelectedNodeOnNodeInsertion(parentType, grandParentType, node)) {
+  if (shouldSplitSelectedNodeOnNodeInsertion({
+    parentNodeType,
+    grandParentNodeType,
+    content: node
+  })) {
     insertNodesWithOptionalParagraph([node], {
       fileExtension,
       inputMethod

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

@@ -3,7 +3,7 @@ import { isSpecialMention } from '@atlaskit/mention/resource';
 import { name as packageName, version as packageVersion } from '../../version-wrapper';
 import { isTeamType } from './utils';
 const componentName = 'mention';
-export const buildAnalyticsPayload = (actionSubject, action, eventType, sessionId, otherAttributes = {}) => ({
+export const buildAnalyticsPayload = (actionSubject, action, eventType, sessionId, otherAttributes = {}, tags = []) => ({
   action,
   actionSubject,
   eventType,
@@ -13,7 +13,8 @@ export const buildAnalyticsPayload = (actionSubject, action, eventType, sessionI
     componentName,
     sessionId,
     ...otherAttributes
-  }
+  },
+  tags
 });
 const emptyQueryResponse = {
   queryLength: 0,
@@ -82,7 +83,7 @@ export const buildTypeAheadInviteExposurePayload = (sessionId, contextIdentifier
     objectId,
     childObjectId,
     userRole
-  });
+  }, ['measurement', 'hasCustomAttributes']);
 };
 export const buildTypeAheadInviteItemClickedPayload = (duration, upKeyCount, downKeyCount, sessionId, insertType, query, contextIdentifierProvider, userRole) => {
   const {

package/dist/es2019/plugins/panel/toolbar.js

@@ -16,7 +16,6 @@ import { DEFAULT_BORDER_COLOR } from '../../ui/ColorPalette/Palettes';
 import { PanelType } from '@atlaskit/adf-schema';
 import { ACTION, ACTION_SUBJECT, EVENT_TYPE, ACTION_SUBJECT_ID, withAnalytics } from '../analytics';
 import { messages } from './message';
-import { getCopyButtonConfig, showCopyButton } from '../copy-button/toolbar';
 export const panelIconMap = {
   [PanelType.INFO]: {
     shortName: ':info:',
@@ -232,10 +231,17 @@ export const getToolbarItems = (formatMessage, panelNodeType, isCustomPanelEnabl
     }
   }
 
-  if (state && showCopyButton(state)) {
+  if (state) {
     items.push({
-      type: 'separator'
-    }, getCopyButtonConfig(state, formatMessage, panelNodeType));
+      type: 'copy-button',
+      items: [{
+        type: 'separator'
+      }, {
+        state,
+        formatMessage,
+        nodeType: panelNodeType
+      }]
+    });
   }
 
   items.push({
@@ -286,7 +292,8 @@ export const getToolbarConfig = (state, intl, options = {}, providerFactory) =>
       title: 'Panel floating controls',
       getDomRef,
       nodeType,
-      items
+      items,
+      scrollable: true
     };
   }
 

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

@@ -16,8 +16,8 @@ export const panelAttrsToDom = (attrs, allowCustomPanel) => {
     panelIconText
   } = attrs;
   const isCustomPanel = panelType === PanelType.CUSTOM && allowCustomPanel;
-  const style = panelColor && isCustomPanel ? `background-color: ${panelColor}` : '';
   const hasIcon = !isCustomPanel || !!panelIcon || !!panelIconId;
+  const style = [`${panelColor && isCustomPanel ? `background-color: ${panelColor};` : ''}`, `${hasIcon ? '' : 'padding: 12px;'}`].join('');
   let panelAttrs = {
     class: PanelSharedCssClassName.prefix,
     'data-panel-type': panelType || PanelType.INFO,