@atlaskit/editor-core 180.1.0 → 181.0.0

package/dist/es2019/plugins/image-upload/pm-plugins/main.js

@@ -4,14 +4,51 @@ import { isDroppedFile } from '../../../utils/drag-drop';
 import { canInsertMedia, isMediaSelected } from '../utils';
 import { insertExternalImage, startImageUpload } from './commands';
 import { stateKey } from './plugin-key';
+
+/**
+ * Microsoft Office includes a screenshot image when copying text content.
+ *
+ * This function determines whether or not we can ignore the image if it
+ * came from MS Office. We do this by checking for
+ *
+ * - plain text
+ * - HTML text which includes the MS Office namespace
+ * - the number of files and the file name/type
+ *
+ * It is easy to manually verify this using by using Office on Mac
+ * (or Excel if on Windows) and pasting into
+ * https://evercoder.github.io/clipboard-inspector/
+ *
+ * Note: image content in Word is stored in the `text/html` portion
+ * of the clipboard, not under `files` attachment like the screenshot.
+ *
+ * @returns boolean True if the paste event contains a screenshot from MS Office
+ */
+const hasScreenshotImageFromMSOffice = ev => {
+  const {
+    clipboardData
+  } = ev;
+  if (!clipboardData || clipboardData.files.length !== 1) {
+    return false;
+  }
+  const textPlain = !!clipboardData.getData('text/plain');
+  const textHtml = clipboardData.getData('text/html');
+  const isOfficeXMLNamespace = textHtml.includes('urn:schemas-microsoft-com:office:office');
+  const file = clipboardData.files[0];
+  const isImagePNG = file.type === 'image/png' && file.name === 'image.png';
+  return isImagePNG && textPlain && isOfficeXMLNamespace;
+};
 const createDOMHandler = (pred, eventName) => (view, event) => {
   if (!pred(event)) {
     return false;
   }
-  event.preventDefault();
-  event.stopPropagation();
-  startImageUpload(event)(view.state, view.dispatch);
-  return true;
+  const shouldUpload = !hasScreenshotImageFromMSOffice(event);
+  if (shouldUpload) {
+    event.preventDefault();
+    event.stopPropagation();
+    startImageUpload(event)(view.state, view.dispatch);
+  }
+  return shouldUpload;
 };
 const getNewActiveUpload = (tr, pluginState) => {
   const meta = tr.getMeta(stateKey);
@@ -76,7 +113,12 @@ export const createPlugin = ({
           // if we've add a new upload to the state, execute the uploadHandler
           const oldState = stateKey.getState(prevState);
           if (currentState.activeUpload !== oldState.activeUpload && currentState.activeUpload && uploadHandler) {
-            uploadHandler(currentState.activeUpload.event, options => insertExternalImage(options)(view.state, view.dispatch));
+            const {
+              event
+            } = currentState.activeUpload;
+            if (!event || !hasScreenshotImageFromMSOffice(event)) {
+              uploadHandler(event, options => insertExternalImage(options)(view.state, view.dispatch));
+            }
           }
         },
         destroy() {

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

@@ -1,12 +1,13 @@
 import { css } from '@emotion/react';
 import { gridSize } from '@atlaskit/theme/constants';
-import { N40A, N50A } from '@atlaskit/theme/colors';
+import { N40A, N50A, DN70, DN80 } from '@atlaskit/theme/colors';
+import { themed } from '@atlaskit/theme/components';
 import { columnLayoutSharedStyle, LAYOUT_SECTION_MARGIN, LAYOUT_COLUMN_PADDING } from '@atlaskit/editor-common/styles';
 import { gridMediumMaxWidth, akEditorDeleteBackground, akEditorDeleteBorder, akEditorSelectedBorderSize, akLayoutGutterOffset, akEditorSwoopCubicBezier, SelectionStyle, getSelectionStyles, akEditorSelectedNodeClassName } from '@atlaskit/editor-shared-styles';
 import { TableCssClassName } from '@atlaskit/editor-plugin-table/types';
 import { tableMarginFullWidthMode } from '@atlaskit/editor-plugin-table/ui/consts';
 export { LAYOUT_COLUMN_PADDING, LAYOUT_SECTION_MARGIN };
-export const layoutStyles = css`
+export const layoutStyles = props => css`
   .ProseMirror {
     ${columnLayoutSharedStyle} [data-layout-section] {
       margin: ${gridSize() - 1}px -${akLayoutGutterOffset}px 0;
@@ -18,7 +19,10 @@ export const layoutStyles = css`
         flex: 1;
         min-width: 0;
         border: ${akEditorSelectedBorderSize}px solid
-          ${`var(--ds-border, ${N40A})`};
+          ${themed({
+  light: `var(--ds-border, ${N40A})`,
+  dark: `var(--ds-border, ${DN70})`
+})(props)};
         border-radius: 4px;
         padding: ${LAYOUT_COLUMN_PADDING}px;
         box-sizing: border-box;
@@ -105,7 +109,11 @@ export const layoutStyles = css`
       /* Shows the border when cursor is inside a layout */
       &.selected [data-layout-column],
       &:hover [data-layout-column] {
-        border-color: ${`var(--ds-border, ${N50A})`};
+        border: ${akEditorSelectedBorderSize}px solid
+          ${themed({
+  light: `var(--ds-border, ${N50A})`,
+  dark: `var(--ds-border, ${DN80})`
+})(props)};
       }
 
       &.selected.danger > [data-layout-column] {

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

@@ -1,32 +1,5 @@
 import { findParentNodeClosestToPos } from 'prosemirror-utils';
 import { isListNode, isListItemNode } from './node';
-export function findFirstNestedList($pos) {
-  const currentNode = $pos.doc.nodeAt($pos.pos);
-  let currentListItemPos = null;
-  if (isListItemNode(currentNode)) {
-    currentListItemPos = $pos.pos;
-  } else {
-    const result = findParentNodeClosestToPos($pos, isListItemNode);
-    currentListItemPos = (result === null || result === void 0 ? void 0 : result.pos) || null;
-  }
-  if (!currentListItemPos) {
-    return null;
-  }
-  const currentListItemNode = $pos.doc.nodeAt(currentListItemPos);
-  if (!currentListItemNode) {
-    return null;
-  }
-  const lastListItemChild = currentListItemNode.child(currentListItemNode.childCount - 1);
-  if (!isListNode(lastListItemChild)) {
-    return null;
-  }
-  const firstNestedListPosition = currentListItemNode.nodeSize - lastListItemChild.nodeSize;
-  const firstNestedListNode = $pos.doc.nodeAt(firstNestedListPosition);
-  if (!isListNode(firstNestedListNode)) {
-    return null;
-  }
-  return $pos.doc.resolve(firstNestedListPosition);
-}
 export function findFirstParentListNode($pos) {
   const currentNode = $pos.doc.nodeAt($pos.pos);
   let listNodePosition = null;

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

@@ -15,29 +15,6 @@ export const getListLiftTarget = resPos => {
   }
   return target - 1;
 };
-export const getNextSiblingListItemPosition = $pos => {
-  var _$pos$doc$nodeAt;
-  let target = $pos.depth;
-  let found = false;
-  for (let i = $pos.depth; i > 0; i--) {
-    const node = $pos.node(i);
-    if (isListItemNode(node)) {
-      target = i;
-      found = true;
-    }
-    if (found) {
-      break;
-    }
-  }
-  const listItemPosition = target - 1;
-  const listItemNodePosition = ((_$pos$doc$nodeAt = $pos.doc.nodeAt(listItemPosition)) === null || _$pos$doc$nodeAt === void 0 ? void 0 : _$pos$doc$nodeAt.nodeSize) || 0;
-  const nextListItemPosition = listItemPosition + listItemNodePosition;
-  const nextListItemNode = $pos.doc.nodeAt(nextListItemPosition);
-  if (nextListItemNode) {
-    return $pos.doc.resolve(nextListItemPosition);
-  }
-  return null;
-};
 export const hasValidListIndentationLevel = ({
   tr,
   maxIndentation

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

@@ -1,7 +1,4 @@
 import { Fragment } from 'prosemirror-model';
-export function isDocumentNode(node) {
-  return Boolean(node && node.type && node.type.name === 'doc');
-}
 export function isListNode(node) {
   return Boolean(node && node.type && ['orderedList', 'bulletList'].includes(node.type.name));
 }
@@ -14,7 +11,7 @@ export function isListItemNode(node) {
 export function isBulletList(node) {
   return Boolean(node && node.type && 'bulletList' === node.type.name);
 }
-export function isListNodeValidContent(node) {
+function isListNodeValidContent(node) {
   const {
     bulletList
   } = node.type.schema.nodes;

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

@@ -122,12 +122,12 @@ export const normalizeListItemsSelection = ({
   const anchor = resolvePositionToEndOfListItem($to);
   return new TextSelection(anchor, head);
 };
-export const resolvePositionToStartOfListItem = $pos => {
+const resolvePositionToStartOfListItem = $pos => {
   const fromRange = $pos.blockRange($pos, isListItemNode);
   const fromPosition = fromRange && $pos.textOffset === 0 && fromRange.end - 1 === $pos.pos ? Selection.near($pos.doc.resolve(fromRange.end + 1), 1).$from : $pos;
   return fromPosition;
 };
-export const resolvePositionToEndOfListItem = $pos => {
+const resolvePositionToEndOfListItem = $pos => {
   const toRange = $pos.blockRange($pos, isListItemNode);
   const toPosition = toRange && $pos.textOffset === 0 && toRange.start + 1 === $pos.pos ? Selection.near($pos.doc.resolve(toRange.start - 1), -1).$to : $pos;
   return toPosition;
@@ -144,17 +144,4 @@ export const createListNodeRange = ({
     return null;
   }
   return range;
-};
-export const createListItemNodeRange = ({
-  selection
-}) => {
-  const {
-    $from,
-    $to
-  } = selection;
-  const range = $from.blockRange($to, isListItemNode);
-  if (!range) {
-    return null;
-  }
-  return range;
 };

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

@@ -1,5 +1,4 @@
 import { deleteSelection, splitBlock } from 'prosemirror-commands';
-import { Fragment } from 'prosemirror-model';
 import { NodeSelection } from 'prosemirror-state';
 import { findPositionOfNodeBefore } from 'prosemirror-utils';
 import { createParagraphNear, createNewParagraphBelow } from '../../../commands';
@@ -86,7 +85,7 @@ export const isInsidePotentialEmptyParagraph = state => {
   } = state.selection;
   return $from.parent.type === state.schema.nodes.paragraph && atTheBeginningOfBlock(state) && atTheEndOfBlock(state);
 };
-export const posOfMediaGroupBelow = (state, $pos, prepend = true) => {
+const posOfMediaGroupBelow = (state, $pos, prepend = true) => {
   let adjacentPos;
   let adjacentNode;
   if (isSelectionNonMediaBlockNode(state)) {
@@ -111,23 +110,6 @@ export const posOfParentMediaGroup = (state, $pos, prepend = false) => {
   }
   return;
 };
-
-/**
- * The function will return the position after current selection where mediaGroup can be inserted.
- */
-export function endPositionForMedia(state, resolvedPos) {
-  const {
-    mediaGroup
-  } = state.schema.nodes;
-  let i = resolvedPos.depth;
-  for (; i > 1; i--) {
-    const nodeType = resolvedPos.node(i).type;
-    if (nodeType.validContent(Fragment.from(mediaGroup.create()))) {
-      break;
-    }
-  }
-  return resolvedPos.end(i) + 1;
-}
 export const removeMediaNode = (view, node, getPos) => {
   const {
     id

package/dist/es2019/plugins/mentions/nodeviews/mention.js

@@ -1,15 +1,56 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
+import { WithProviders } from '@atlaskit/editor-common/provider-factory';
 import Mention from '../ui/Mention';
 import { useIntl } from 'react-intl-next';
 import { messages } from '../messages';
-const MentionAssistiveTextComponent = /*#__PURE__*/React.memo(({
-  mentionedName
+import { isResolvingMentionProvider, MentionNameStatus } from '@atlaskit/mention';
+import { isPromise } from '@atlaskit/mention/types';
+const UNKNOWN_USER_ID = '_|unknown|_';
+const MentionAssistiveTextComponent = ({
+  id,
+  text,
+  providers,
+  accessLevel,
+  mentionProvider
 }) => {
+  const [resolvedName, setResolvedName] = useState(text);
   const intl = useIntl();
-  return /*#__PURE__*/React.createElement("span", {
+  const processName = name => {
+    if (name.status === MentionNameStatus.OK) {
+      return `@${name.name || ''}`;
+    } else {
+      return `@${UNKNOWN_USER_ID}`;
+    }
+  };
+  useEffect(() => {
+    if (mentionProvider) {
+      mentionProvider.then(async provider => {
+        if (!text && isResolvingMentionProvider(provider)) {
+          const nameDetail = provider.resolveMentionName(id);
+          if (isPromise(nameDetail)) {
+            return processName(await nameDetail);
+          } else {
+            return processName(nameDetail);
+          }
+        } else {
+          return text;
+        }
+      }).then(resolvedName => {
+        setResolvedName(resolvedName);
+      });
+    }
+  }, [id, text, mentionProvider]);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
     className: 'assistive'
-  }, `${intl.formatMessage(messages.mentionsNodeLabel)} ${mentionedName}`);
-});
+  }, `${intl.formatMessage(messages.mentionsNodeLabel)} ${resolvedName}`), /*#__PURE__*/React.createElement("span", {
+    "aria-hidden": "true"
+  }, /*#__PURE__*/React.createElement(Mention, {
+    id: id,
+    text: resolvedName,
+    accessLevel: accessLevel,
+    providers: providers
+  })));
+};
 export const MentionNodeView = props => {
   const {
     providerFactory
@@ -19,14 +60,21 @@ export const MentionNodeView = props => {
     text,
     accessLevel
   } = props.node.attrs;
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(MentionAssistiveTextComponent, {
-    mentionedName: text
-  }), /*#__PURE__*/React.createElement("span", {
-    "aria-hidden": "true"
-  }, /*#__PURE__*/React.createElement(Mention, {
-    id: id,
-    text: text,
-    accessLevel: accessLevel,
-    providers: providerFactory
-  })));
+  const renderAssistiveTextWithProviders = providers => {
+    const {
+      mentionProvider
+    } = providers;
+    return /*#__PURE__*/React.createElement(MentionAssistiveTextComponent, {
+      mentionProvider: mentionProvider,
+      id: id,
+      text: text,
+      providers: providerFactory,
+      accessLevel: accessLevel
+    });
+  };
+  return /*#__PURE__*/React.createElement(WithProviders, {
+    providers: ['mentionProvider', 'profilecardProvider'],
+    providerFactory: providerFactory,
+    renderNode: renderAssistiveTextWithProviders
+  });
 };

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

@@ -4,7 +4,6 @@ import { Fragment } from 'prosemirror-model';
 import { isResolvingMentionProvider } from '@atlaskit/mention/resource';
 import { MENTION_ITEM_HEIGHT, MentionItem } from '@atlaskit/mention/item';
 import { TypeAheadAvailableNodes } from '@atlaskit/editor-common/type-ahead';
-import { TeamMentionHighlight, TeamMentionHighlightController } from '@atlaskit/mention/spotlight';
 import { buildTypeAheadCancelPayload, buildTypeAheadInsertedPayload, buildTypeAheadInviteExposurePayload, buildTypeAheadInviteItemClickedPayload, buildTypeAheadInviteItemViewedPayload, buildTypeAheadRenderedPayload } from '../analytics';
 import InviteItem, { INVITE_ITEM_DESCRIPTION } from '../ui/InviteItem';
 import { isInviteItem, isTeamType, isTeamStats, shouldKeepInviteItem } from '../utils';
@@ -112,7 +111,7 @@ const buildAndSendElementsTypeAheadAnalytics = fireEvent => ({
   const payload = buildTypeAheadRenderedPayload(duration, userOrTeamIds, query, teams);
   fireEvent(payload);
 };
-const isTeamMentionProvider = p => !!(p.mentionTypeaheadHighlightEnabled && p.mentionTypeaheadCreateTeamPath);
+
 /**
  * When a team mention is selected, we render a team link and list of member/user mentions
  * in editor content
@@ -185,17 +184,6 @@ export const createTypeAheadConfig = ({
       if (CustomHighlightComponent) {
         return /*#__PURE__*/React.createElement(CustomHighlightComponent, null);
       }
-      const pluginState = getMentionPluginState(state);
-      const provider = pluginState.mentionProvider;
-      if (provider) {
-        const teamMentionProvider = provider;
-        if (isTeamMentionProvider(teamMentionProvider) && teamMentionProvider.mentionTypeaheadHighlightEnabled()) {
-          return /*#__PURE__*/React.createElement(TeamMentionHighlight, {
-            createTeamLink: teamMentionProvider.mentionTypeaheadCreateTeamPath(),
-            onClose: () => TeamMentionHighlightController.registerClosed()
-          });
-        }
-      }
       return null;
     },
     getItems({
@@ -304,7 +292,6 @@ export const createTypeAheadConfig = ({
       fireEvent(buildTypeAheadInsertedPayload(pickerElapsedTime, stats.keyCount.arrowUp, stats.keyCount.arrowDown, sessionId, mode, item.mention, sourceListItem.map(x => x.mention), query, pluginState.contextIdentifierProvider));
       sessionId = uuid();
       if (mentionProvider && isTeamType(userType)) {
-        TeamMentionHighlightController.registerTeamMention();
         return insert(buildNodesForTeamMention(schema, item.mention, mentionProvider, sanitizePrivateContent));
       }
 

package/dist/es2019/plugins/mentions/ui/InviteItem/index.js

@@ -5,9 +5,8 @@ import AddIcon from '@atlaskit/icon/glyph/add';
 import { N300 } from '@atlaskit/theme/colors';
 import React, { useCallback, useEffect } from 'react';
 import { FormattedMessage, injectIntl } from 'react-intl-next';
-import { avatarStyle, capitalizedStyle, mentionItemStyle, nameSectionStyle, rowStyle, ROW_SIDE_PADDING, AVATAR_HEIGHT, mentionItemSelectedStyle } from './styles';
+import { avatarStyle, capitalizedStyle, mentionItemStyle, nameSectionStyle, rowStyle, mentionItemSelectedStyle } from './styles';
 import { messages } from '../../messages';
-export const INVITE_ITEM_MIN_HEIGHT = AVATAR_HEIGHT + ROW_SIDE_PADDING * 2;
 export const INVITE_ITEM_DESCRIPTION = {
   id: 'invite-teammate'
 };

package/dist/es2019/plugins/mobile-dimensions/index.js

@@ -1,9 +1,6 @@
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { setWindowHeight } from './commands';
 import { createPluginState, mobileDimensionsPluginKey } from './plugin-factory';
-
-// 44 pixels squared is the minimum size for a tap target as per Apple's UX design guidelines
-export const MIN_TAP_SIZE_PX = 44;
 const getInitialState = () => ({
   keyboardHeight: -1,
   mobilePaddingTop: 0,

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

@@ -1,8 +1,7 @@
 import { createPlugin } from './pm-plugins/main';
 const pastePlugin = ({
   cardOptions,
-  sanitizePrivateContent,
-  plainTextPasteLinkification
+  sanitizePrivateContent
 }) => ({
   name: 'paste',
   pmPlugins() {