@atlaskit/editor-core 154.0.0 → 155.0.0

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

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/extends";
 import AddIcon from '@atlaskit/icon/glyph/add';
 import { N300 } from '@atlaskit/theme/colors';
 import React, { useCallback, useEffect } from 'react';
-import { FormattedMessage } from 'react-intl-next';
+import { FormattedMessage, injectIntl } from 'react-intl-next';
 import { AvatarStyle, CapitalizedStyle, MentionItemStyle, NameSectionStyle, RowStyle, ROW_SIDE_PADDING, AVATAR_HEIGHT } from './styles';
 import { messages } from '../../messages';
 export var INVITE_ITEM_MIN_HEIGHT = AVATAR_HEIGHT + ROW_SIDE_PADDING * 2;
@@ -20,7 +20,8 @@ var InviteItem = function InviteItem(_ref) {
       onMouseEnter = _ref.onMouseEnter,
       onSelection = _ref.onSelection,
       selected = _ref.selected,
-      userRole = _ref.userRole;
+      userRole = _ref.userRole,
+      intl = _ref.intl;
   var onSelected = useCallback(function (event) {
     if (leftClick(event) && onSelection) {
       event.preventDefault();
@@ -43,7 +44,7 @@ var InviteItem = function InviteItem(_ref) {
     onMouseEnter: onItemMouseEnter,
     "data-id": INVITE_ITEM_DESCRIPTION.id
   }, /*#__PURE__*/React.createElement(RowStyle, null, /*#__PURE__*/React.createElement(AvatarStyle, null, /*#__PURE__*/React.createElement(AddIcon, {
-    label: "add-icon",
+    label: intl.formatMessage(messages.mentionsAddLabel),
     primaryColor: N300
   })), /*#__PURE__*/React.createElement(NameSectionStyle, null, /*#__PURE__*/React.createElement(FormattedMessage, _extends({}, messages.inviteItemTitle, {
     values: {
@@ -53,4 +54,4 @@ var InviteItem = function InviteItem(_ref) {
   })))));
 };
 
-export default InviteItem;
+export default injectIntl(InviteItem);

package/dist/esm/plugins/mentions/ui/ToolbarMention/index.js

@@ -16,6 +16,8 @@ import MentionIcon from '@atlaskit/icon/glyph/editor/mention';
 import ToolbarButton, { TOOLBAR_BUTTON } from '../../../../ui/ToolbarButton';
 import { INPUT_METHOD } from '../../../analytics';
 import { createTypeAheadTools } from '../../../type-ahead/api';
+import { injectIntl } from 'react-intl-next';
+import { messages } from '../../messages';
 
 var ToolbarMention = /*#__PURE__*/function (_PureComponent) {
   _inherits(ToolbarMention, _PureComponent);
@@ -48,15 +50,16 @@ var ToolbarMention = /*#__PURE__*/function (_PureComponent) {
   _createClass(ToolbarMention, [{
     key: "render",
     value: function render() {
+      var mentionStringTranslated = this.props.intl.formatMessage(messages.mentionsIconLabel);
       return /*#__PURE__*/React.createElement(ToolbarButton, {
         testId: this.props.testId,
         buttonId: TOOLBAR_BUTTON.MENTION,
         spacing: "none",
         onClick: this.handleInsertMention,
         disabled: this.props.isDisabled,
-        title: "Mention @",
+        title: mentionStringTranslated + '@',
         iconBefore: /*#__PURE__*/React.createElement(MentionIcon, {
-          label: "Mention"
+          label: mentionStringTranslated
         })
       });
     }
@@ -65,4 +68,4 @@ var ToolbarMention = /*#__PURE__*/function (_PureComponent) {
   return ToolbarMention;
 }(PureComponent);
 
-export { ToolbarMention as default };
+export default injectIntl(ToolbarMention);

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

@@ -1,4 +1,4 @@
-import { Plugin } from 'prosemirror-state';
+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
 
@@ -19,9 +19,23 @@ var getInitialState = function getInitialState() {
 
 var createPlugin = function createPlugin(dispatch) {
   var rafId;
-  return new Plugin({
+  return new SafePlugin({
     state: createPluginState(dispatch, getInitialState),
     key: mobileDimensionsPluginKey,
+    props: {
+      scrollThreshold: {
+        top: 12,
+        left: 0,
+        right: 0,
+        bottom: 12
+      },
+      scrollMargin: {
+        top: 12,
+        bottom: 12,
+        left: 0,
+        right: 0
+      }
+    },
     view: function view(editorView) {
       var handleResize = function handleResize() {
         if (rafId) {

package/dist/esm/plugins/mobile-selection/content-in-selection.js

@@ -2,12 +2,12 @@
 export var contentInSelection = function contentInSelection(_ref) {
   var selection = _ref.selection,
       doc = _ref.doc;
-  var nodes = new Set();
-  var marks = new Set();
+  var nodes = new Array();
+  var marks = new Array();
   doc.nodesBetween(selection.from, selection.to, function (node) {
-    nodes.add(node.type.name);
+    nodes.push(node.type.name);
     node.marks.forEach(function (mark) {
-      return marks.add(mark.type.name);
+      return marks.push(mark.type.name);
     });
     return true;
   });

package/dist/esm/plugins/mobile-selection/mobile-selection-plugin.js

@@ -1,9 +1,10 @@
-import { Plugin, PluginKey } from 'prosemirror-state';
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { PluginKey } from 'prosemirror-state';
 import { findDomRefAtPos } from 'prosemirror-utils';
 import { contentInSelection } from './content-in-selection';
 export var selectionPluginKey = new PluginKey('mobile-selection');
 export var createProseMirrorPlugin = function createProseMirrorPlugin(dispatch) {
-  return new Plugin({
+  return new SafePlugin({
     view: function view(editorView) {
       var domAtPos = editorView.domAtPos.bind(editorView);
       return {

package/dist/esm/plugins/panel/pm-plugins/main.js

@@ -1,4 +1,4 @@
-import { Plugin } from 'prosemirror-state';
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { PanelSharedCssClassName } from '@atlaskit/editor-common/styles';
 import { getPanelNodeView } from '../nodeviews/panel';
 import { pluginKey } from '../types';
@@ -6,7 +6,7 @@ import { createSelectionClickHandler } from '../../selection/utils';
 export var createPlugin = function createPlugin(dispatch, providerFactory, pluginOptions) {
   var _pluginOptions$useLon = pluginOptions.useLongPressSelection,
       useLongPressSelection = _pluginOptions$useLon === void 0 ? false : _pluginOptions$useLon;
-  return new Plugin({
+  return new SafePlugin({
     key: pluginKey,
     props: {
       nodeViews: {

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

@@ -44,41 +44,47 @@ export var panelIconMap = (_panelIconMap = {}, _defineProperty(_panelIconMap, Pa
   id: 'atlassian-tip'
 }), _panelIconMap);
 export var getToolbarItems = function getToolbarItems(formatMessage, panelNodeType, isCustomPanelEnabled, isCustomPanelEditable, providerFactory, activePanelType, activePanelColor, activePanelIcon) {
+  // TODO: ED-14403 investigate why these titles are not getting translated for the tooltips
   var items = [{
     id: 'editor.panel.info',
     type: 'button',
     icon: InfoIcon,
     onClick: changePanelType(PanelType.INFO),
     selected: activePanelType === PanelType.INFO,
-    title: formatMessage(messages.info)
+    title: formatMessage(messages.info),
+    tabIndex: null
   }, {
     id: 'editor.panel.note',
     type: 'button',
     icon: NoteIcon,
     onClick: changePanelType(PanelType.NOTE),
     selected: activePanelType === PanelType.NOTE,
-    title: formatMessage(messages.note)
+    title: formatMessage(messages.note),
+    tabIndex: null
   }, {
     id: 'editor.panel.success',
     type: 'button',
     icon: SuccessIcon,
     onClick: changePanelType(PanelType.SUCCESS),
     selected: activePanelType === PanelType.SUCCESS,
-    title: formatMessage(messages.success)
+    title: formatMessage(messages.success),
+    tabIndex: null
   }, {
     id: 'editor.panel.warning',
     type: 'button',
     icon: WarningIcon,
     onClick: changePanelType(PanelType.WARNING),
     selected: activePanelType === PanelType.WARNING,
-    title: formatMessage(messages.warning)
+    title: formatMessage(messages.warning),
+    tabIndex: null
   }, {
     id: 'editor.panel.error',
     type: 'button',
     icon: ErrorIcon,
     onClick: changePanelType(PanelType.ERROR),
     selected: activePanelType === PanelType.ERROR,
-    title: formatMessage(messages.error)
+    title: formatMessage(messages.error),
+    tabIndex: null
   }];
 
   if (isCustomPanelEnabled) {
@@ -248,7 +254,8 @@ export var getToolbarItems = function getToolbarItems(formatMessage, panelNodeTy
     onMouseLeave: hoverDecoration(panelNodeType, false),
     onFocus: hoverDecoration(panelNodeType, true),
     onBlur: hoverDecoration(panelNodeType, false),
-    title: formatMessage(commonMessages.remove)
+    title: formatMessage(commonMessages.remove),
+    tabIndex: null
   });
   return items;
 };

package/dist/esm/plugins/paste/handlers.js

@@ -101,9 +101,18 @@ export function handlePasteLinkOnSelectedText(slice) {
       var paragraph = slice.content.child(0);
 
       if (paragraph.content.childCount === 1 && isText(paragraph.content.child(0), schema)) {
-        var text = paragraph.content.child(0);
+        var text = paragraph.content.child(0); // If pasteType is plain text, then
+        //  @atlaskit/editor-markdown-transformer in getMarkdownSlice decode
+        //  url before setting text property of text node.
+        //  However href of marks will be without decoding.
+        //  So, if there is character (e.g space) in url eligible escaping then
+        //  mark.attrs.href will not be equal to text.text.
+        //  That's why decoding mark.attrs.href before comparing.
+        // However, if pasteType is richText, that means url in text.text
+        //  and href in marks, both won't be decoded.
+
         linkMark = text.marks.find(function (mark) {
-          return isLinkMark(mark, schema) && mark.attrs.href === text.text;
+          return isLinkMark(mark, schema) && (mark.attrs.href === text.text || decodeURI(mark.attrs.href) === text.text);
         });
       }
     } // if we have a link, apply it to the selected text if we have any and it's allowed
@@ -621,11 +630,14 @@ export function insertIntoPanel(tr, slice, panel) {
 }
 export function handleRichText(slice) {
   return function (state, dispatch) {
-    var _panelParentOverCurre;
+    var _slice$content;
 
     var _state$schema$nodes2 = state.schema.nodes,
         codeBlock = _state$schema$nodes2.codeBlock,
-        panel = _state$schema$nodes2.panel; // In case user is pasting inline code,
+        heading = _state$schema$nodes2.heading,
+        paragraph = _state$schema$nodes2.paragraph;
+    var selection = state.selection;
+    var firstChildOfSlice = (_slice$content = slice.content) === null || _slice$content === void 0 ? void 0 : _slice$content.firstChild; // In case user is pasting inline code,
     // any backtick ` immediately preceding it should be removed.
 
     var tr = state.tr;
@@ -639,20 +651,27 @@ export function handleRichText(slice) {
     }
 
     closeHistory(tr);
-    var panelParentOverCurrentSelection = findParentNodeOfType(panel)(tr.selection);
-    var isFirstChildListNode = isListNode(slice.content.firstChild);
-    var isLastChildListNode = isListNode(slice.content.lastChild);
-    var isSliceContentListNodes = isFirstChildListNode || isLastChildListNode;
-    var isTargetPanelEmpty = panelParentOverCurrentSelection && ((_panelParentOverCurre = panelParentOverCurrentSelection.node) === null || _panelParentOverCurre === void 0 ? void 0 : _panelParentOverCurre.content.size) === 2;
+    var isFirstChildListNode = isListNode(firstChildOfSlice);
+    var isLastChildListNode = isListNode(firstChildOfSlice);
+    var isSliceContentListNodes = isFirstChildListNode || isLastChildListNode; // We want to use safeInsert to insert invalid content, as it inserts at the closest non schema violating position
+    // rather than spliting the selection parent node in half (which is what replaceSelection does)
+    // Exception is paragraph and heading nodes, these should be split, provided their parent supports the pasted content
+
+    var textNodes = [heading, paragraph];
+    var selectionParent = selection.$to.node(selection.$to.depth - 1);
+    var noNeedForSafeInsert = selection.$to.node().type.validContent(slice.content) || textNodes.includes(selection.$to.node().type) && selectionParent.type.validContent(slice.content);
 
-    if (isSliceContentListNodes || isTargetPanelEmpty) {
+    if (isSliceContentListNodes) {
       insertSliceForLists({
         tr: tr,
         slice: slice
       });
+    } else if (noNeedForSafeInsert) {
+      tr.replaceSelection(slice);
     } else {
-      // if inside an empty panel, try and insert content inside it rather than replace it
-      insertIntoPanel(tr, slice, panel);
+      // need safeInsert rather than replaceSelection, so that nodes aren't split in half
+      // e.g. when pasting a layout into a table, replaceSelection splits the table in half and adds the layout in the middle
+      tr = safeInsert(slice.content, tr.selection.$to.pos)(tr);
     }
 
     tr.setStoredMarks([]);

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

@@ -2,7 +2,8 @@ import { createPlugin } from './pm-plugins/main';
 
 var pastePlugin = function pastePlugin(_ref) {
   var cardOptions = _ref.cardOptions,
-      sanitizePrivateContent = _ref.sanitizePrivateContent;
+      sanitizePrivateContent = _ref.sanitizePrivateContent,
+      plainTextPasteLinkification = _ref.plainTextPasteLinkification;
   return {
     name: 'paste',
     pmPlugins: function pmPlugins() {
@@ -12,7 +13,7 @@ var pastePlugin = function pastePlugin(_ref) {
           var schema = _ref2.schema,
               providerFactory = _ref2.providerFactory,
               dispatchAnalyticsEvent = _ref2.dispatchAnalyticsEvent;
-          return createPlugin(schema, dispatchAnalyticsEvent, cardOptions, sanitizePrivateContent, providerFactory);
+          return createPlugin(schema, dispatchAnalyticsEvent, plainTextPasteLinkification, cardOptions, sanitizePrivateContent, providerFactory);
         }
       }];
     }

package/dist/esm/plugins/paste/pm-plugins/analytics.js

@@ -120,7 +120,7 @@ function getActionSubjectId(view) {
   return actionSubjectId ? actionSubjectId : ACTION_SUBJECT_ID.PASTE_PARAGRAPH;
 }
 
-function createPasteAsPlainPayload(actionSubjectId, text) {
+function createPasteAsPlainPayload(actionSubjectId, text, linksInPasteCount) {
   return {
     action: ACTION.PASTED_AS_PLAIN,
     actionSubject: ACTION_SUBJECT.DOCUMENT,
@@ -128,7 +128,8 @@ function createPasteAsPlainPayload(actionSubjectId, text) {
     eventType: EVENT_TYPE.TRACK,
     attributes: {
       inputMethod: INPUT_METHOD.KEYBOARD,
-      pasteSize: text.length
+      pasteSize: text.length,
+      linksInPasteCount: linksInPasteCount
     }
   };
 }
@@ -152,23 +153,6 @@ function createPastePayload(actionSubjectId, attributes, linkDomain) {
 export function createPasteAnalyticsPayload(view, event, slice, pasteContext) {
   var text = event.clipboardData ? event.clipboardData.getData('text/plain') || event.clipboardData.getData('text/uri-list') : '';
   var actionSubjectId = getActionSubjectId(view);
-
-  if (pasteContext.asPlain) {
-    return createPasteAsPlainPayload(actionSubjectId, text);
-  }
-
-  var source = getPasteSource(event);
-
-  if (pasteContext.type === PasteTypes.plain) {
-    return createPastePayload(actionSubjectId, {
-      pasteSize: text.length,
-      type: pasteContext.type,
-      content: PasteContents.text,
-      source: source,
-      hyperlinkPasteOnText: false
-    });
-  }
-
   var pasteSize = slice.size;
   var content = getContent(view.state, slice);
   var linkUrls = []; // If we have a link among the pasted content, grab the
@@ -188,13 +172,31 @@ export function createPasteAnalyticsPayload(view, event, slice, pasteContext) {
     });
   }
 
+  if (pasteContext.asPlain) {
+    return createPasteAsPlainPayload(actionSubjectId, text, linkUrls.length);
+  }
+
+  var source = getPasteSource(event);
+
+  if (pasteContext.type === PasteTypes.plain) {
+    return createPastePayload(actionSubjectId, {
+      pasteSize: text.length,
+      type: pasteContext.type,
+      content: PasteContents.text,
+      source: source,
+      hyperlinkPasteOnText: false,
+      linksInPasteCount: linkUrls.length
+    });
+  }
+
   var linkDomains = linkUrls.map(getLinkDomain);
   return createPastePayload(actionSubjectId, {
     type: pasteContext.type,
     pasteSize: pasteSize,
     content: content,
     source: source,
-    hyperlinkPasteOnText: !!pasteContext.hyperlinkPasteOnText
+    hyperlinkPasteOnText: !!pasteContext.hyperlinkPasteOnText,
+    linksInPasteCount: linkUrls.length
   }, linkDomains);
 } // TODO: ED-6612 We should not dispatch only analytics, it's preferred to wrap each command with his own analytics.
 // However, handlers like handleMacroAutoConvert dispatch multiple time,

package/dist/esm/plugins/paste/pm-plugins/clipboard-text-serializer.js

@@ -0,0 +1,37 @@
+/**
+ * Returns a plain text serialization of a given slice. This is used for populating the plain text
+ * section of the clipboard on copy.
+ * The current implementation is bare bones - only inlineCards and blockCards are tested (they
+ * previously were empty on plain text copy).
+ * Unknown nodes are passed to node.textBetween().
+ *
+ * By default (without this function passed to the editor), the editor uses
+ * `slice.content.textBetween(0, slice.content.size, "\n\n")`
+ * (see https://prosemirror.net/docs/ref/#view.EditorProps.clipboardTextSerializer)
+ */
+export function clipboardTextSerializer(slice) {
+  var text = '';
+  var blockSeparater = '\n\n';
+  slice.content.nodesBetween(0, slice.content.size, function (node) {
+    if (node.type.isBlock) {
+      text += blockSeparater;
+    }
+
+    if (node.type.name === 'paragraph') {
+      return true;
+    } else if (node.type.name === 'hardBreak') {
+      text += '\n';
+    } else if (node.type.name === 'text') {
+      text += node.text;
+    } else if (node.type.name === 'inlineCard') {
+      text += node.attrs.url;
+    } else if (node.type.name === 'blockCard') {
+      text += node.attrs.url;
+    } else {
+      text += node.textBetween(0, node.content.size, '\n\n');
+    }
+
+    return false;
+  });
+  return text.trim();
+}

package/dist/esm/plugins/paste/pm-plugins/main.js

@@ -3,10 +3,12 @@ import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
 // @ts-ignore: outdated type definitions
 import { handlePaste as handlePasteTable } from '@atlaskit/editor-tables/utils';
 import { Slice, Fragment } from 'prosemirror-model';
-import { Plugin, PluginKey } from 'prosemirror-state';
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { PluginKey } from 'prosemirror-state';
 import uuid from 'uuid';
 import { MarkdownTransformer } from '@atlaskit/editor-markdown-transformer';
 import { getExtensionAutoConvertersFromProvider } from '@atlaskit/editor-common/extensions';
+sendPasteAnalyticsEvent;
 import * as clipboard from '../../../utils/clipboard';
 import { transformSliceForMedia } from '../../media/utils/media-single';
 import { escapeLinks, htmlContainsSingleFile, isPastedFromWord, isPastedFromExcel, htmlHasInvalidLinkTags, removeDuplicateInvalidLinks } from '../util';
@@ -31,6 +33,8 @@ import { transformUnsupportedBlockCardToInline } from '../../card/utils';
 import { transformSliceToDecisionList } from '../../tasks-and-decisions/utils';
 import { containsAnyAnnotations, stripNonExistingAnnotations } from '../../annotation/utils';
 import { pluginKey as betterTypePluginKey } from '../../base/pm-plugins/better-type-history';
+import { clipboardTextSerializer } from './clipboard-text-serializer';
+import { htmlHasIncompleteTable, tryRebuildCompleteTableHtml, isPastedFromTinyMCEConfluence } from '../util/tinyMCE';
 export var stateKey = new PluginKey('pastePlugin');
 export { md } from '../md';
 
@@ -49,7 +53,7 @@ function isBackgroundCellAllowed(state) {
   return tableState && tableState.pluginConfig.allowBackgroundColor;
 }
 
-export function createPlugin(schema, dispatchAnalyticsEvent, cardOptions, sanitizePrivateContent, providerFactory) {
+export function createPlugin(schema, dispatchAnalyticsEvent, plainTextPasteLinkification, cardOptions, sanitizePrivateContent, providerFactory) {
   var atlassianMarkDownParser = new MarkdownTransformer(schema, md);
 
   function getMarkdownSlice(text, openStart, openEnd) {
@@ -117,9 +121,18 @@ export function createPlugin(schema, dispatchAnalyticsEvent, cardOptions, saniti
     providerFactory.subscribe('extensionProvider', setExtensionAutoConverter);
   }
 
-  return new Plugin({
+  var mostRecentPasteEvent;
+  return new SafePlugin({
     key: stateKey,
     props: {
+      // For serialising to plain text
+      clipboardTextSerializer: clipboardTextSerializer,
+      handleDOMEvents: {
+        paste: function paste(view, event) {
+          mostRecentPasteEvent = event;
+          return false;
+        }
+      },
       handlePaste: function handlePaste(view, rawEvent, slice) {
         var _analyticsPlugin$perf, _analyticsPlugin$perf2;
 
@@ -202,8 +215,9 @@ export function createPlugin(schema, dispatchAnalyticsEvent, cardOptions, saniti
         };
 
         slice = handleParagraphBlockMarks(state, slice);
+        var plainTextPasteSlice = plainTextPasteLinkification === true ? linkifyContent(state.schema)(slice) : slice;
 
-        if (handlePasteAsPlainTextWithAnalytics(view, event, slice)(state, dispatch, view)) {
+        if (handlePasteAsPlainTextWithAnalytics(view, event, plainTextPasteSlice)(state, dispatch, view)) {
           return true;
         } // transform slices based on destination
 
@@ -369,6 +383,17 @@ export function createPlugin(schema, dispatchAnalyticsEvent, cardOptions, saniti
         if (html.indexOf('id="docs-internal-guid-') >= 0) {
           html = html.replace(/white-space:pre/g, '');
           html = html.replace(/white-space:pre-wrap/g, '');
+        } // Partial fix for ED-7331: During a copy/paste from the legacy tinyMCE
+        // confluence editor, if we encounter an incomplete table (e.g. table elements
+        // not wrapped in <table>), we try to rebuild a complete, valid table if possible.
+
+
+        if (mostRecentPasteEvent && isPastedFromTinyMCEConfluence(mostRecentPasteEvent, html) && htmlHasIncompleteTable(html)) {
+          var completeTableHtml = tryRebuildCompleteTableHtml(html);
+
+          if (completeTableHtml) {
+            html = completeTableHtml;
+          }
         }
 
         if (!isPastedFromWord(html) && !isPastedFromExcel(html) && html.indexOf('<img ') >= 0) {
@@ -382,6 +407,7 @@ export function createPlugin(schema, dispatchAnalyticsEvent, cardOptions, saniti
           html = removeDuplicateInvalidLinks(html);
         }
 
+        mostRecentPasteEvent = null;
         return html;
       }
     }