@atlaskit/editor-core 171.0.1 → 172.0.0

package/dist/cjs/plugins/tasks-and-decisions/pm-plugins/keymaps.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.getUnindentCommand = exports.getIndentCommand = exports.default = void 0;
 exports.keymapPlugin = keymapPlugin;
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
@@ -36,14 +36,14 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
-var indentationAnalytics = function indentationAnalytics(curIndentLevel, direction) {
+var indentationAnalytics = function indentationAnalytics(curIndentLevel, direction, inputMethod) {
   return {
     action: _analytics.ACTION.FORMATTED,
     actionSubject: _analytics.ACTION_SUBJECT.TEXT,
     actionSubjectId: _analytics.ACTION_SUBJECT_ID.FORMAT_INDENT,
     eventType: _analytics.EVENT_TYPE.TRACK,
     attributes: {
-      inputMethod: _analytics.INPUT_METHOD.KEYBOARD,
+      inputMethod: inputMethod,
       previousIndentationLevel: curIndentLevel,
       newIndentLevel: direction === _analytics.INDENT_DIRECTION.OUTDENT ? curIndentLevel - 1 : curIndentLevel + 1,
       direction: direction,
@@ -112,17 +112,23 @@ var joinTaskDecisionFollowing = function joinTaskDecisionFollowing(state, dispat
   return false;
 };
 
-var unindent = (0, _commands.filter)(_helpers.isInsideTask, function (state, dispatch) {
-  var curIndentLevel = (0, _helpers.getCurrentIndentLevel)(state.selection);
+var getUnindentCommand = function getUnindentCommand() {
+  var inputMethod = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : _analytics.INPUT_METHOD.KEYBOARD;
+  return (0, _commands.filter)(_helpers.isInsideTask, function (state, dispatch) {
+    var curIndentLevel = (0, _helpers.getCurrentIndentLevel)(state.selection);
 
-  if (!curIndentLevel || curIndentLevel === 1) {
-    return false;
-  }
+    if (!curIndentLevel || curIndentLevel === 1) {
+      return false;
+    }
 
-  return (0, _analytics.withAnalytics)(indentationAnalytics(curIndentLevel, _analytics.INDENT_DIRECTION.OUTDENT))((0, _prosemirrorCommands.autoJoin)(_commands3.liftSelection, ['taskList']))(state, dispatch);
-}); // if selection is decision item or first action item in table cell
+    return (0, _analytics.withAnalytics)(indentationAnalytics(curIndentLevel, _analytics.INDENT_DIRECTION.OUTDENT, inputMethod))((0, _prosemirrorCommands.autoJoin)(_commands3.liftSelection, ['taskList']))(state, dispatch);
+  });
+}; // if selection is decision item or first action item in table cell
 // then dont consume the Tab, as table-keymap should tab to the next cell
 
+
+exports.getUnindentCommand = getUnindentCommand;
+
 var shouldLetTabThroughInTable = function shouldLetTabThroughInTable(state) {
   var curIndentLevel = (0, _helpers.getCurrentIndentLevel)(state.selection);
   var curIndex = (0, _helpers.getTaskItemIndex)(state);
@@ -138,28 +144,33 @@ var shouldLetTabThroughInTable = function shouldLetTabThroughInTable(state) {
   return false;
 };
 
-var indent = (0, _commands.filter)(_helpers.isInsideTask, function (state, dispatch) {
-  // limit ui indentation to 6 levels
-  var curIndentLevel = (0, _helpers.getCurrentIndentLevel)(state.selection);
+var getIndentCommand = function getIndentCommand() {
+  var inputMethod = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : _analytics.INPUT_METHOD.KEYBOARD;
+  return (0, _commands.filter)(_helpers.isInsideTask, function (state, dispatch) {
+    // limit ui indentation to 6 levels
+    var curIndentLevel = (0, _helpers.getCurrentIndentLevel)(state.selection);
 
-  if (!curIndentLevel || curIndentLevel >= 6) {
-    return true;
-  }
+    if (!curIndentLevel || curIndentLevel >= 6) {
+      return true;
+    }
 
-  var _state$schema$nodes3 = state.schema.nodes,
-      taskList = _state$schema$nodes3.taskList,
-      taskItem = _state$schema$nodes3.taskItem;
-  var _state$selection = state.selection,
-      $from = _state$selection.$from,
-      $to = _state$selection.$to;
-  var maxDepth = (0, _helpers.subtreeHeight)($from, $to, [taskList, taskItem]);
+    var _state$schema$nodes3 = state.schema.nodes,
+        taskList = _state$schema$nodes3.taskList,
+        taskItem = _state$schema$nodes3.taskItem;
+    var _state$selection = state.selection,
+        $from = _state$selection.$from,
+        $to = _state$selection.$to;
+    var maxDepth = (0, _helpers.subtreeHeight)($from, $to, [taskList, taskItem]);
 
-  if (maxDepth >= 6) {
-    return true;
-  }
+    if (maxDepth >= 6) {
+      return true;
+    }
 
-  return (0, _analytics.withAnalytics)(indentationAnalytics(curIndentLevel, _analytics.INDENT_DIRECTION.INDENT))((0, _prosemirrorCommands.autoJoin)(_commands3.wrapSelectionInTaskList, ['taskList']))(state, dispatch);
-});
+    return (0, _analytics.withAnalytics)(indentationAnalytics(curIndentLevel, _analytics.INDENT_DIRECTION.INDENT, inputMethod))((0, _prosemirrorCommands.autoJoin)(_commands3.wrapSelectionInTaskList, ['taskList']))(state, dispatch);
+  });
+};
+
+exports.getIndentCommand = getIndentCommand;
 
 var backspaceFrom = function backspaceFrom($from) {
   return function (state, dispatch) {
@@ -176,7 +187,7 @@ var backspaceFrom = function backspaceFrom($from) {
         paragraph = _state$schema$nodes4.paragraph;
 
     if ($from.node($from.depth - 2).type === taskList) {
-      return unindent(state, dispatch);
+      return getUnindentCommand()(state, dispatch);
     } // bottom level, should "unwrap" taskItem contents into paragraph
     // we achieve this by slicing the content out, and replacing
 
@@ -326,7 +337,7 @@ var splitListItem = function splitListItem(state, dispatch) {
   return false;
 };
 
-var enter = (0, _commands.filter)(_helpers.isInsideTaskOrDecisionItem, (0, _prosemirrorCommands.chainCommands)((0, _commands.filter)(_helpers.isEmptyTaskDecision, (0, _prosemirrorCommands.chainCommands)(unindent, splitListItem)), function (state, dispatch) {
+var enter = (0, _commands.filter)(_helpers.isInsideTaskOrDecisionItem, (0, _prosemirrorCommands.chainCommands)((0, _commands.filter)(_helpers.isEmptyTaskDecision, (0, _prosemirrorCommands.chainCommands)(getUnindentCommand(), splitListItem)), function (state, dispatch) {
   var selection = state.selection,
       schema = state.schema;
   var taskItem = schema.nodes.taskItem;
@@ -375,12 +386,12 @@ function keymapPlugin(schema, allowNestedTasks, consumeTabs) {
     'Shift-Tab': (0, _commands.filter)([_helpers.isInsideTaskOrDecisionItem, function (state) {
       return !shouldLetTabThroughInTable(state);
     }], function (state, dispatch) {
-      return unindent(state, dispatch) || !!consumeTabs;
+      return getUnindentCommand(_analytics.INPUT_METHOD.KEYBOARD)(state, dispatch) || !!consumeTabs;
     }),
     Tab: (0, _commands.filter)([_helpers.isInsideTaskOrDecisionItem, function (state) {
       return !shouldLetTabThroughInTable(state);
     }], function (state, dispatch) {
-      return indent(state, dispatch) || !!consumeTabs;
+      return getIndentCommand(_analytics.INPUT_METHOD.KEYBOARD)(state, dispatch) || !!consumeTabs;
     })
   };
   var defaultHandlers = consumeTabs ? {

package/dist/cjs/plugins/toolbar-lists-indentation/index.js

@@ -17,25 +17,43 @@ var _types = require("../../ui/Toolbar/types");
 
 var _main = require("../list/pm-plugins/main");
 
+var _indentationButtons = require("./pm-plugins/indentation-buttons");
+
 var toolbarListsIndentationPlugin = function toolbarListsIndentationPlugin(_ref) {
-  var showIndentationButtons = _ref.showIndentationButtons;
+  var showIndentationButtons = _ref.showIndentationButtons,
+      allowHeadingAndParagraphIndentation = _ref.allowHeadingAndParagraphIndentation;
   return {
     name: 'toolbarListsIndentation',
-    primaryToolbarComponent: function primaryToolbarComponent(_ref2) {
-      var editorView = _ref2.editorView,
-          popupsMountPoint = _ref2.popupsMountPoint,
-          popupsBoundariesElement = _ref2.popupsBoundariesElement,
-          popupsScrollableElement = _ref2.popupsScrollableElement,
-          toolbarSize = _ref2.toolbarSize,
-          disabled = _ref2.disabled,
-          isToolbarReducedSpacing = _ref2.isToolbarReducedSpacing;
+    pmPlugins: function pmPlugins() {
+      return [{
+        name: 'indentationButtons',
+        plugin: function plugin(_ref2) {
+          var dispatch = _ref2.dispatch;
+          return (0, _indentationButtons.createPlugin)({
+            dispatch: dispatch,
+            showIndentationButtons: showIndentationButtons,
+            allowHeadingAndParagraphIndentation: allowHeadingAndParagraphIndentation
+          });
+        }
+      }];
+    },
+    primaryToolbarComponent: function primaryToolbarComponent(_ref3) {
+      var editorView = _ref3.editorView,
+          popupsMountPoint = _ref3.popupsMountPoint,
+          popupsBoundariesElement = _ref3.popupsBoundariesElement,
+          popupsScrollableElement = _ref3.popupsScrollableElement,
+          toolbarSize = _ref3.toolbarSize,
+          disabled = _ref3.disabled,
+          isToolbarReducedSpacing = _ref3.isToolbarReducedSpacing;
       var isSmall = toolbarSize < _types.ToolbarSize.L;
       return /*#__PURE__*/_react.default.createElement(_WithPluginState.default, {
         plugins: {
-          listState: _main.pluginKey
+          listState: _main.pluginKey,
+          indentationState: _indentationButtons.pluginKey
         },
-        render: function render(_ref3) {
-          var listState = _ref3.listState;
+        render: function render(_ref4) {
+          var listState = _ref4.listState,
+              indentationState = _ref4.indentationState;
 
           if (!listState) {
             return null;
@@ -53,7 +71,9 @@ var toolbarListsIndentationPlugin = function toolbarListsIndentationPlugin(_ref)
             bulletListDisabled: listState.bulletListDisabled,
             orderedListActive: listState.orderedListActive,
             orderedListDisabled: listState.orderedListDisabled,
-            showIndentationButtons: !!showIndentationButtons
+            showIndentationButtons: !!showIndentationButtons,
+            indentDisabled: indentationState.indentDisabled,
+            outdentDisabled: indentationState.outdentDisabled
           });
         }
       });

package/dist/cjs/plugins/toolbar-lists-indentation/pm-plugins/indentation-buttons.js

@@ -0,0 +1,122 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.pluginKey = exports.createPlugin = void 0;
+
+var _prosemirrorState = require("prosemirror-state");
+
+var _prosemirrorUtils = require("prosemirror-utils");
+
+var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
+
+var _utils = require("../../../utils");
+
+var _selection = require("../../list/utils/selection");
+
+var _helpers = require("../../tasks-and-decisions/pm-plugins/helpers");
+
+var _commands = require("../../indentation/commands");
+
+var pluginKey = new _prosemirrorState.PluginKey('indentationButtonsPlugin');
+exports.pluginKey = pluginKey;
+
+function getIndentationButtonsState(editorState, allowHeadingAndParagraphIndentation) {
+  var state = {
+    indentDisabled: true,
+    outdentDisabled: true,
+    node: null
+  };
+  var selection = editorState.selection;
+  var node = selection.$from.node(); // Handle bullet and numbered lists seperately as they do
+  // not use the indentation mark.
+  // Check for lists before paragraphs and headings in case
+  // the selection is in a list nested in a layout column.
+
+  if ((0, _selection.isInsideListItem)(editorState)) {
+    var _getListItemAttribute = (0, _selection.getListItemAttributes)(selection.$head),
+        indentLevel = _getListItemAttribute.indentLevel,
+        itemIndex = _getListItemAttribute.itemIndex;
+
+    return {
+      // List indent levels are zero indexed so we need to subtract 1
+      indentDisabled: itemIndex === 0 || indentLevel >= _commands.MAX_INDENTATION_LEVEL - 1,
+      outdentDisabled: false,
+      node: 'list'
+    };
+  } // Handle tasks seperately as they do not use the indentation mark
+  // and have different behaviour for outdent compared to lists
+
+
+  if ((0, _helpers.isInsideTask)(editorState)) {
+    var _indentLevel = (0, _helpers.getCurrentIndentLevel)(selection) || 0;
+
+    var _itemIndex = (0, _helpers.getTaskItemIndex)(editorState);
+
+    return {
+      indentDisabled: _itemIndex === 0 || _indentLevel >= _commands.MAX_INDENTATION_LEVEL,
+      outdentDisabled: _indentLevel <= 1,
+      node: 'taskList'
+    };
+  }
+
+  var isTopLevelParagraphOrHeading = selection.$from.depth === 1;
+  var isInLayoutNode = (0, _prosemirrorUtils.hasParentNodeOfType)(editorState.schema.nodes.layoutColumn)(selection) && // depth of non-nested paragraphs and headings in layouts will always be 3
+  selection.$from.depth === 3;
+
+  if (allowHeadingAndParagraphIndentation && (0, _commands.isIndentationAllowed)(editorState.schema, node) && (isTopLevelParagraphOrHeading || isInLayoutNode)) {
+    var indentationMark = node.marks.find(function (mark) {
+      return mark.type === editorState.schema.marks.indentation;
+    });
+
+    if (!indentationMark) {
+      return {
+        outdentDisabled: true,
+        indentDisabled: false,
+        node: 'paragraph_heading'
+      };
+    }
+
+    return {
+      indentDisabled: indentationMark.attrs.level >= _commands.MAX_INDENTATION_LEVEL,
+      outdentDisabled: false,
+      node: 'paragraph_heading'
+    };
+  }
+
+  return state;
+}
+
+var createPlugin = function createPlugin(_ref) {
+  var dispatch = _ref.dispatch,
+      showIndentationButtons = _ref.showIndentationButtons,
+      allowHeadingAndParagraphIndentation = _ref.allowHeadingAndParagraphIndentation;
+  return new _safePlugin.SafePlugin({
+    state: {
+      init: function init(_config, state) {
+        var initialState = {
+          indentDisabled: true,
+          outdentDisabled: true,
+          node: null
+        };
+        return showIndentationButtons ? getIndentationButtonsState(state, allowHeadingAndParagraphIndentation) : initialState;
+      },
+      apply: function apply(_tr, pluginState, _oldState, newState) {
+        if (showIndentationButtons) {
+          var state = getIndentationButtonsState(newState, allowHeadingAndParagraphIndentation);
+
+          if (!(0, _utils.shallowEqual)(pluginState, state)) {
+            dispatch(pluginKey, state);
+            return state;
+          }
+        }
+
+        return pluginState;
+      }
+    },
+    key: pluginKey
+  });
+};
+
+exports.createPlugin = createPlugin;

package/dist/cjs/plugins/toolbar-lists-indentation/ui/Toolbar.js

@@ -47,6 +47,8 @@ function Toolbar(props) {
       orderedListActive = props.orderedListActive,
       orderedListDisabled = props.orderedListDisabled,
       showIndentationButtons = props.showIndentationButtons,
+      indentDisabled = props.indentDisabled,
+      outdentDisabled = props.outdentDisabled,
       onItemActivated = props.onItemActivated;
   var labelUnorderedList = formatMessage(_messages.messages.unorderedList);
   var labelOrderedList = formatMessage(_messages.messages.orderedList);
@@ -94,24 +96,28 @@ function Toolbar(props) {
     })
   }), showIndentationButtons && (0, _react.jsx)(_ToolbarButton.default, {
     buttonId: _ToolbarButton.TOOLBAR_BUTTON.INDENT,
+    testId: _ToolbarButton.TOOLBAR_BUTTON.INDENT,
     spacing: isReducedSpacing ? 'none' : 'default',
     onClick: handleOnItemActivated('indent'),
     iconBefore: (0, _react.jsx)(_indent.default, {
       label: ""
     }),
-    disabled: true,
+    disabled: indentDisabled || disabled,
+    "aria-label": formatMessage(_messages2.messages.indent),
     title: (0, _react.jsx)(_keymaps.ToolTipContent, {
       description: formatMessage(_messages2.messages.indent),
       keymap: _keymaps.indent
     })
   }), showIndentationButtons && (0, _react.jsx)(_ToolbarButton.default, {
     buttonId: _ToolbarButton.TOOLBAR_BUTTON.OUTDENT,
+    testId: _ToolbarButton.TOOLBAR_BUTTON.OUTDENT,
     spacing: isReducedSpacing ? 'none' : 'default',
     onClick: handleOnItemActivated('outdent'),
     iconBefore: (0, _react.jsx)(_outdent.default, {
       label: ""
     }),
-    disabled: true,
+    disabled: outdentDisabled || disabled,
+    "aria-label": formatMessage(_messages2.messages.outdent),
     title: (0, _react.jsx)(_keymaps.ToolTipContent, {
       description: formatMessage(_messages2.messages.outdent),
       keymap: _keymaps.outdent

package/dist/cjs/plugins/toolbar-lists-indentation/ui/ToolbarDropdown.js

@@ -148,7 +148,7 @@ function useItems(props) {
       value: {
         name: 'indent'
       },
-      isDisabled: true,
+      isDisabled: props.indentDisabled,
       isActive: false,
       elemAfter: (0, _react.jsx)("div", {
         css: _styles.shortcutStyle
@@ -159,7 +159,7 @@ function useItems(props) {
       value: {
         name: 'outdent'
       },
-      isDisabled: true,
+      isDisabled: props.outdentDisabled,
       isActive: false,
       elemAfter: (0, _react.jsx)("div", {
         css: _styles.shortcutStyle

package/dist/cjs/plugins/toolbar-lists-indentation/ui/index.js

@@ -25,7 +25,9 @@ function ToolbarListsIndentation(props) {
       showIndentationButtons = props.showIndentationButtons,
       popupsMountPoint = props.popupsMountPoint,
       popupsBoundariesElement = props.popupsBoundariesElement,
-      popupsScrollableElement = props.popupsScrollableElement;
+      popupsScrollableElement = props.popupsScrollableElement,
+      indentDisabled = props.indentDisabled,
+      outdentDisabled = props.outdentDisabled;
 
   if (isSmall) {
     return (0, _react.jsx)(_ToolbarDropdown.ToolbarDropdown, {
@@ -39,6 +41,8 @@ function ToolbarListsIndentation(props) {
       showIndentationButtons: showIndentationButtons,
       orderedListActive: orderedListActive,
       orderedListDisabled: orderedListDisabled,
+      indentDisabled: indentDisabled,
+      outdentDisabled: outdentDisabled,
       disabled: disabled,
       onItemActivated: _onItemActivated.onItemActivated
     });
@@ -52,6 +56,8 @@ function ToolbarListsIndentation(props) {
     showIndentationButtons: showIndentationButtons,
     orderedListActive: orderedListActive,
     orderedListDisabled: orderedListDisabled,
+    indentDisabled: indentDisabled,
+    outdentDisabled: outdentDisabled,
     disabled: disabled,
     onItemActivated: _onItemActivated.onItemActivated
   });

package/dist/cjs/plugins/toolbar-lists-indentation/ui/onItemActivated.js

@@ -7,8 +7,14 @@ exports.onItemActivated = onItemActivated;
 
 var _commands = require("../../list/commands");
 
+var _commands2 = require("../../indentation/commands");
+
+var _keymaps = require("../../tasks-and-decisions/pm-plugins/keymaps");
+
 var _analytics = require("../../analytics");
 
+var _indentationButtons = require("../pm-plugins/indentation-buttons");
+
 function onItemActivated(_ref) {
   var buttonName = _ref.buttonName,
       editorView = _ref.editorView;
@@ -23,26 +29,41 @@ function onItemActivated(_ref) {
       break;
 
     case 'indent':
-      editorView.someProp('handleKeyDown', function (handleKeyDown) {
-        return handleKeyDown(editorView, new KeyboardEvent('keydown', {
-          bubbles: true,
-          cancelable: true,
-          key: 'Tab',
-          code: 'Tab'
-        }));
-      });
-      break;
+      {
+        var node = _indentationButtons.pluginKey.getState(editorView.state).node;
+
+        if (node === 'paragraph_heading') {
+          (0, _commands2.getIndentCommand)(_analytics.INPUT_METHOD.TOOLBAR)(editorView.state, editorView.dispatch);
+        }
+
+        if (node === 'list') {
+          (0, _commands.indentList)(_analytics.INPUT_METHOD.TOOLBAR)(editorView.state, editorView.dispatch);
+        }
+
+        if (node === 'taskList') {
+          (0, _keymaps.getIndentCommand)(_analytics.INPUT_METHOD.TOOLBAR)(editorView.state, editorView.dispatch);
+        }
+
+        break;
+      }
 
     case 'outdent':
-      editorView.someProp('handleKeyDown', function (handleKeyDown) {
-        return handleKeyDown(editorView, new KeyboardEvent('keydown', {
-          bubbles: true,
-          cancelable: true,
-          shiftKey: true,
-          key: 'Tab',
-          code: 'Tab'
-        }));
-      });
-      break;
+      {
+        var _node = _indentationButtons.pluginKey.getState(editorView.state).node;
+
+        if (_node === 'paragraph_heading') {
+          (0, _commands2.getOutdentCommand)(_analytics.INPUT_METHOD.TOOLBAR)(editorView.state, editorView.dispatch);
+        }
+
+        if (_node === 'list') {
+          (0, _commands.outdentList)(_analytics.INPUT_METHOD.TOOLBAR)(editorView.state, editorView.dispatch);
+        }
+
+        if (_node === 'taskList') {
+          (0, _keymaps.getUnindentCommand)(_analytics.INPUT_METHOD.TOOLBAR)(editorView.state, editorView.dispatch);
+        }
+
+        break;
+      }
   }
 }

package/dist/cjs/plugins/type-ahead/transforms/open-typeahead-at-cursor.js

@@ -11,6 +11,8 @@ var _key = require("../pm-plugins/key");
 
 var _actions = require("../pm-plugins/actions");
 
+var _utils = require("@atlaskit/editor-common/utils");
+
 var openTypeAhead = function openTypeAhead(props) {
   return function (tr) {
     var triggerHandler = props.triggerHandler,
@@ -34,6 +36,8 @@ var openTypeAheadAtCursor = function openTypeAheadAtCursor(_ref) {
       inputMethod = _ref.inputMethod,
       query = _ref.query;
   return function (tr) {
+    var _selection$$head, _selection$$head$pare, _selection$$head$pare2, _selection$$head$pare3;
+
     openTypeAhead({
       triggerHandler: triggerHandler,
       inputMethod: inputMethod,
@@ -57,6 +61,12 @@ var openTypeAheadAtCursor = function openTypeAheadAtCursor(_ref) {
 
     if (nodeAtCursor && isPlaceholderAtCursorPosition) {
       tr.delete(cursorPos, cursorPos + nodeAtCursor.nodeSize);
+    } // ME-2375 remove the superfluous '@' inserted before decoration
+    // by composition (https://github.com/ProseMirror/prosemirror/issues/903)
+
+
+    if (_utils.browser.chrome && _utils.browser.android && cursorPos > 2 && !!(selection !== null && selection !== void 0 && (_selection$$head = selection.$head) !== null && _selection$$head !== void 0 && (_selection$$head$pare = _selection$$head.parent) !== null && _selection$$head$pare !== void 0 && _selection$$head$pare.textContent) && (_selection$$head$pare2 = (_selection$$head$pare3 = selection.$head.parent.textContent).endsWith) !== null && _selection$$head$pare2 !== void 0 && _selection$$head$pare2.call(_selection$$head$pare3, '@')) {
+      tr.delete(cursorPos - 1, cursorPos);
     }
 
     return tr;

package/dist/cjs/types/browser.js

@@ -0,0 +1,6 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var SupportedBrowsers = ['ie', 'gecko', 'chrome', 'safari'];

package/dist/cjs/ui/Addon/click-area-helper.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.clickAreaClickHandler = void 0;
+exports.clickAreaClickHandler = exports.checkForModal = void 0;
 
 var _dom = require("../../utils/dom");
 
@@ -23,10 +23,36 @@ var insideContentArea = function insideContentArea(ref) {
 
   return false;
 };
+/**
+ * @see ED-14699 - check if editor is inside a modal to continue to bring cursor to input when
+ * any part of the editor container is clicked
+ *
+ * Handles two cases when a click event is fired:
+ *
+ * 1. if editor (e.g. comment inside of Jira ticket view) is inside modal then ensure focus and cursor is brought to the input
+ * 2. if another modal is open (e.g. delete confirmation modal for confluence table) then ignore clicks as they shouldn't influence editor state
+ */
+
+
+var checkForModal = function checkForModal(target) {
+  var modalDialog = target.closest('[role=dialog]');
+
+  if (modalDialog) {
+    // return false if not an editor inside modal, otherwise return true
+    return !!(modalDialog !== null && modalDialog !== void 0 && modalDialog.querySelector('.akEditor'));
+  } // no modal present so we can return true
+
+
+  return true;
+};
+
+exports.checkForModal = checkForModal;
 
 var clickAreaClickHandler = function clickAreaClickHandler(view, event) {
-  var contentArea = event.currentTarget.querySelector('.ak-editor-content-area');
-  var editorFocused = !!(view && view.hasFocus());
+  var _view$hasFocus;
+
+  var isTargetContentArea = event.currentTarget.querySelector('.ak-editor-content-area');
+  var isEditorFocused = !!(view !== null && view !== void 0 && (_view$hasFocus = view.hasFocus) !== null && _view$hasFocus !== void 0 && _view$hasFocus.call(view));
   var target = event.target; // @see https://product-fabric.atlassian.net/browse/ED-4287
   // click event gets triggered twice on a checkbox (on <label> first and then on <input>)
   // by the time it gets triggered on input, PM already re-renders nodeView and detaches it from DOM
@@ -38,13 +64,10 @@ var clickAreaClickHandler = function clickAreaClickHandler(view, event) {
 
   var isTextAreaClicked = target.nodeName === 'TEXTAREA';
   var isBreadcrumbClicked = !!(0, _dom.closestElement)(target, 'nav[aria-label="Breadcrumbs"]');
-  var targetIsNotContentArea = !contentArea;
-  var tragetIsNotChildOfContentArea = !insideContentArea(target.parentNode);
-  var editorIsNotInFocus = editorFocused === false;
+  var isTargetChildOfContentArea = insideContentArea(target.parentNode);
   var selection = window.getSelection();
   var isEditorPopupTextSelected = (selection === null || selection === void 0 ? void 0 : selection.type) === 'Range' && (0, _dom.closestElement)(selection === null || selection === void 0 ? void 0 : selection.anchorNode, '[data-editor-popup]');
-  var isModalDialog = !!target.closest('[role=dialog]');
-  var isClickOutsideEditor = (targetIsNotContentArea || tragetIsNotChildOfContentArea || editorIsNotInFocus) && !isInputClicked && !isTextAreaClicked && !isPopupClicked && !isModalDialog && !isBreadcrumbClicked && !isPopupClicked && !isEditorPopupTextSelected;
+  var isClickOutsideEditor = (!isTargetContentArea || !isTargetChildOfContentArea || !isEditorFocused) && !isInputClicked && !isTextAreaClicked && !isPopupClicked && !isBreadcrumbClicked && !isEditorPopupTextSelected && checkForModal(target); // click was within editor container and focus should be brought to input
 
   if (isClickOutsideEditor && view) {
     outsideProsemirrorEditorClickHandler(view, event);
@@ -54,15 +77,21 @@ var clickAreaClickHandler = function clickAreaClickHandler(view, event) {
 exports.clickAreaClickHandler = clickAreaClickHandler;
 
 var outsideProsemirrorEditorClickHandler = function outsideProsemirrorEditorClickHandler(view, event) {
+  var _view$hasFocus2;
+
   var dispatch = view.dispatch,
       dom = view.dom,
       state = view.state;
-  var editorFocused = !!(view && view.hasFocus());
   var tr = state.tr;
-  appendEmptyParagraph(event, dom, tr);
+  var isEditorFocused = !!(view !== null && view !== void 0 && (_view$hasFocus2 = view.hasFocus) !== null && _view$hasFocus2 !== void 0 && _view$hasFocus2.call(view));
+  var isBottomAreaClicked = event.clientY > dom.getBoundingClientRect().bottom;
+
+  if (isBottomAreaClicked) {
+    (0, _commands.addParagraphAtEnd)(tr);
+  }
 
   if ((0, _gapCursorSelection.hasGapCursorPlugin)(state)) {
-    (0, _gapCursorSelection.setSelectionTopLevelBlocks)(tr, event, dom, view.posAtCoords.bind(view), editorFocused);
+    (0, _gapCursorSelection.setSelectionTopLevelBlocks)(tr, event, dom, view.posAtCoords.bind(view), isEditorFocused);
   }
 
   if (!tr.docChanged && !tr.selectionSet) {
@@ -76,12 +105,4 @@ var outsideProsemirrorEditorClickHandler = function outsideProsemirrorEditorClic
   view.focus();
   event.stopPropagation();
   event.preventDefault();
-};
-
-var appendEmptyParagraph = function appendEmptyParagraph(event, dom, tr) {
-  var bottomAreaClicked = event.clientY > dom.getBoundingClientRect().bottom;
-
-  if (bottomAreaClicked) {
-    (0, _commands.addParagraphAtEnd)(tr);
-  }
 };

package/dist/cjs/ui/Appearance/Comment/Comment.js

@@ -79,8 +79,8 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 
 var CommentEditorMargin = 14;
 var CommentEditorSmallerMargin = 8;
-var commentEditorStyle = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: column;\n\n  .less-margin .ProseMirror {\n    margin: 12px ", "px ", "px;\n  }\n\n  min-width: 272px;\n  /* Border + Toolbar + Footer + (Paragraph + ((Parahraph + Margin) * (DefaultLines - 1)) */\n  /* calc(2px + 40px + 24px + ( 20px + (32px * 2))) */\n\n  height: auto;\n  background-color: ", ";\n  border: 1px solid ", ";\n  box-sizing: border-box;\n  border-radius: ", "px;\n\n  max-width: inherit;\n  word-wrap: break-word;\n"])), CommentEditorSmallerMargin, CommentEditorSmallerMargin, (0, _tokens.token)('color.background.input', 'white'), (0, _tokens.token)('color.border', _colors.N40), (0, _constants.borderRadius)());
-var ContentArea = (0, _ContentStyles.createEditorContentStyle)((0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  flex-grow: 1;\n  overflow-x: hidden;\n  overflow-y: auto;\n  line-height: 24px;\n\n  /** Hack for Bitbucket to ensure entire editorView gets drop event; see ED-3294 **/\n  /** Hack for tables controlls. Otherwise marging collapse and controlls are misplaced. **/\n  .ProseMirror {\n    margin: 12px ", "px ", "px;\n  }\n\n  .gridParent {\n    margin-left: ", "px;\n    margin-right: ", "px;\n    width: calc(100% + ", "px);\n  }\n\n  padding: ", "px;\n\n  ", ";\n"])), CommentEditorMargin, CommentEditorMargin, CommentEditorMargin - _grid.GRID_GUTTER, CommentEditorMargin - _grid.GRID_GUTTER, CommentEditorMargin - _grid.GRID_GUTTER, _Toolbar2.TableControlsPadding, _commonStyles.tableCommentEditorStyles));
+var commentEditorStyle = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: column;\n\n  .less-margin .ProseMirror {\n    margin: 12px ", "px ", "px;\n  }\n\n  min-width: 272px;\n  /* Border + Toolbar + Footer + (Paragraph + ((Paragraph + Margin) * (DefaultLines - 1)) */\n  /* calc(2px + 40px + 24px + ( 20px + (32px * 2))) */\n\n  height: auto;\n  background-color: ", ";\n  border: 1px solid ", ";\n  box-sizing: border-box;\n  border-radius: ", "px;\n\n  max-width: inherit;\n  word-wrap: break-word;\n"])), CommentEditorSmallerMargin, CommentEditorSmallerMargin, (0, _tokens.token)('color.background.input', 'white'), (0, _tokens.token)('color.border', _colors.N40), (0, _constants.borderRadius)());
+var ContentArea = (0, _ContentStyles.createEditorContentStyle)((0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  flex-grow: 1;\n  overflow-x: hidden;\n  overflow-y: auto;\n  line-height: 24px;\n\n  /** Hack for Bitbucket to ensure entire editorView gets drop event; see ED-3294 **/\n  /** Hack for table controls. Otherwise margin collapse and controls are misplaced. **/\n  .ProseMirror {\n    margin: 12px ", "px ", "px;\n  }\n\n  .gridParent {\n    margin-left: ", "px;\n    margin-right: ", "px;\n    width: calc(100% + ", "px);\n  }\n\n  padding: ", "px;\n\n  ", ";\n"])), CommentEditorMargin, CommentEditorMargin, CommentEditorMargin - _grid.GRID_GUTTER, CommentEditorMargin - _grid.GRID_GUTTER, CommentEditorMargin - _grid.GRID_GUTTER, _Toolbar2.TableControlsPadding, _commonStyles.tableCommentEditorStyles));
 ContentArea.displayName = 'ContentArea';
 var secondaryToolbarStyle = (0, _react2.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  box-sizing: border-box;\n  justify-content: flex-end;\n  align-items: center;\n  display: flex;\n  padding: 12px 1px;\n"])));